vmars316
-
Posts
480 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by vmars316
-
-
Quote
I recommend spending more time studying the Javascript tutorial
Yes I am working on it .
All day this one has me stumped:
Quote<!DOCTYPE html>
<html lang="en">
<head>
<title>Opening Links in an iFrame</title>
<body>
<h3>Access an iframe</h3>
<button onclick="changeStuff()">Change Stuff</button >
<hr>
<br><br>
<iframe id=myIFrame" src="file:///C:/Electron-js/___KidSafeBrowser-020121/Frames_Study/Adjusted-For-Local-Folder/SomeLocalLinks-01.html" ></iframe>
<br><br>
<script>
// GET REFERRENCE TO iframe: tell javascript there is such an entity as iframe
const myIframe = document.getE1ementById("myIframe") ;
function changeStuff(){
const iframeWindow = myIframe.contentWindow ;
console.log(iframeWindow)
/*
alert(iframeWindow)
const iframeDocument = myIframe.content.Document;
console.log(iframeDocument)
const iframePara = iframeDocument.query("p")iframeDocument.body.style.backgroundColor = lightgreen ;
iframepara.textContent = "This is now lightgreen!" ;
*/
}
</script>
</body></html>This line:
const myIframe = document.getE1ementById("myIframe") ;
What's wrong with it ?
Thanks
-
This :
function Function_1(){
alert("Function-1()")
// var showThis = iframe.document.documentElement.outerHTML
var myIframe = document.querySelector("iframe");
myIframe = iframe.document.documentElement.outerHTML
console.log(myIframe);
document.getElementById("paragraph_1").innerHTML = myIframe ;
}yields this
"ReferenceError: iframe is not defined"This
function Function_1(){
alert("Function-1()")
// var showThis = iframe.document.documentElement.outerHTML
var iframe = document.querySelector("iframe");
iframe = iframe.document.documentElement.outerHTML
console.log(iframe);
document.getElementById("paragraph_1").innerHTML = iframe ;
}yields this:
Cannot read property 'documentElement' of undefined
-
Hello ;
I want to show iframe.document in parent html , but I only get an
"Uncaught ReferenceError: iframe is not defined" error .
Pls , what am I doing wrong ?
<!DOCTYPE html> <html lang="en"> <head> <title>Opening Links in an iFrame</title> <style> iframe { width: 100%; height: 500px; } button {display: inline-block;} iframe { width="100%";} </style> </head> <body> <p style="text-align: center;">Communiation Between 'parent' and 'iframe Child' elements <button onclick="Function_1()">1</button> <button onclick="Function_2()">2</button> <button onclick="Function_3()">3</button> <button onclick="Function_4()">4</button> <p id="paragraph_1"> empty </p> <iframe src="SomeLocalLinks-01.html" name="myFrame"></iframe> <script> var links = myFrame.document.querySelectorAll( 'a' ); for ( var c = 0; c < links.length; c ++ ) { links[c].addEventListener('click', WhichLinkWasClicked); } function WhichLinkWasClicked(evt) { alert( evt.target ) ; evt.preventDefault(); } </script> <script> function Function_1(){ alert("Function-1()") var showThis = iframe.document.documentElement.outerHTML console.log(showThis); document.getElementById("paragraph_1").innerHTML = showThis ; } </script> <script> function Function_2() { alert("Function-2()")} </script> <script> function Function_3(){ alert("Function-3()")} </script> <script> function Function_4(){ alert("Function-4()")} </script> </body></html>
Thanks
-
Hello ,
How can parent-html detect onNewPage in iframe-html , same-domain ?
Here is the Prototype of this scenario online:
http://vmars.us/Frames_Study/Which-Open-Links-In-iFrame-Which.html
or
<!DOCTYPE html> <html lang="en"> <head> <title>Opening Links in an iFrame</title> <style> iframe { width: 100%; height: 500px; } </style> </head> <body> <p style="text-align: center;">Communiation Between 'parent' and 'iframe Child' elements <br>On <a> Click in 'iframe' , Send Clicked Url to a 'parent' function .</p> <iframe src="SomeLocalLinks-00.html" name="myFrame"></iframe> <script> var links = myFrame.document.querySelectorAll( 'a' ); for ( var c = 0; c < links.length; c ++ ) { links[c].addEventListener('click', WhichLinkWasClicked); } function WhichLinkWasClicked(evt) { alert( evt.target ) ; evt.preventDefault(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>Opening Links from an iFrame</title> <style> iframe { width: 100%; height: 500px; } </style> </head> <body> <br><br><a href="SomeLocalLinks-01.html">SomeLocalLinks-01</a> <br><br><a href="SomeLocalLinks-02.html">SomeLocalLinks-02</a> <br><br><a href="SomeLocalLinks-03.html">SomeLocalLinks-03</a> <br><br><a href="SomeLocalLinks-04.html">SomeLocalLinks-04</a> <br><br></body> </html>
Thanks for your Help...
-
On 1/23/2021 at 4:51 PM, dsonesuk said:
class="grid-container" style=" class="text-align:left; font-size: 20px; "
You can't see the problem here?
I do now , Thanks
-
Hello ;
I want to Set font-size for contentEditable grid ;
but as soon as I enter text , it reverts to some default size .
Pls , how to fix this ?
Thanks for your Help...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <!-- https://www.freeformatter.com/html-validator.html --> <style> /* comment */ body { font-size: 16px; } .grid-container { display: grid; grid-gap: 2px; /*grid-gap*/ grid-template-columns: repeat( auto-fill, minmax(120px, 100%) minmax(120px, 100%) ); background-color: peachpuff; /*grid-background-color*/ padding: 4px; /*padding*/ } .grid-container > .div_div{ text-align: left; background-color: rgba(255, 255, 255, 0.8); padding: 4px; } .div_div { resize: vertical; height: 7000px; /textarea-height*/ Width: 100%; } p { text-align: left; } </style> </head> <body> <h5 contenteditable="true" style="text-align: center;" >Generated By Html-Grid-Maker</h5> <!-- comment --> <div contenteditable="true" class="grid-container" style=" class="text-align:left; font-size: 20px; "> <!--contenteditable--> <!-- <div contenteditable="true" class="div_div" style="order: 1;">1</div> --> <div class="div_div"style="order: 1;"><p>Row 1 Col 1</p></div> <div class="div_div"style="order: 2;"><p>Row 1 Col 2</p></div> </div> <br><br> </body> </html>
-
Hello;
I found exactly what I need here:
https://gist.github.com/erickzhao/3f2141be4c6d84c3028742b8998e0f6e
-
Thanks niche
I ended using
#mainDiv { text-align: center; width: 55%; background-color: #ffffff; padding: 4px; white-space: nowrap;
Thanks
-
Hello;
I want to float a <div> so that it is always centered on the webpage .
How can I do this ?
<style> body { background-color: #ebe8e4; } #flexBox-container { display: flex; flex-wrap: nowrap; background-color: #fbe9d6; text-align: center; // width: 100%; } </style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <link rel="stylesheet" type="text/css" href="./styles.css"> </head> <body> <div id="flexBox-container"> <span> </span> <button id="back">Back</button> <span> </span> <button id="forward">Forward</button> <span> </span> <button id="refresh">Refresh</button> <span> </span> <button id="home">Home</button> <span> </span> <input id="url" style="width: 200px;" type="url" value="http://vmars.us/KidSafeBrowser/"/> <span> </span> <button id="go">Go</button> </div> <script> // You can also require other files to run in this process require('./renderer.js') </script> </body> </html>
Thanks for your Help...
-
14 hours ago, dsonesuk said:
Which is totally unrelated to the link provided, which explains why you get this error mainly for browserview but also mentions webview.
You are introducing a new conversation on a subject that was not mentioned, not referred too, with no reason to mention. The issue was with browserview, the link was how go about fixing that issue.
I am not using:
How to fix BrowserWindow is not a constructor error when creating child window in Electron renderer process
Ask Question. So it is not pertinent to me .I gave these links , just in case you are not proficient with webview/BrowserView in Electron , to give you some context for this question .
https://www.electronjs.org/docs/api/webview-tag
Recommends not using webview any more .This is the recommended way:
https://www.electronjs.org/docs/api/browser-view -
On 11/27/2020 at 1:10 PM, dsonesuk said:
Webview? It does not mention webview, what are you looking at?
Yes it is here: ttps://www.electronjs.org/docs/api/webview-tag
-
Thanks dsonesuk ;
I am using BrowserView not webview ,
and I am doing it in main.js , not in renderer.js .
https://www.electronjs.org/docs/api/webview-tag
Recommends not using webview any more .This is the recommended way:
https://www.electronjs.org/docs/api/browser-viewMy whole main.js code:
const electron = require("electron") ; const app = electron.app ; const path = require('path') ; const url = require('url') ; const { BrowserView, BrowserWindow } = require('electron') ; app.on('ready', function() { const win = new BrowserWindow( {width: 600, height: 600, webPreferences: {nodeIntegration: true} }) ; const view = new BrowserView( ) ; // {width: 350, height: 350, webPreferences: {nodeIntegration: true} win.setBrowserView(view) ; win.webContents.loadURL("file:///C:/Electron-js/~~KidSafeBrowser-RESTART/index.html") ; win.webContents.openDevTools() // works in same window view.setBounds({ x: 10, y: 40, width: 750 , height: 500 }) ; view.webContents.loadURL('http://vmars.us/KidSafeBrowser/SafeBrowserHome.html') ; } ) ; app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (browserwindow.getAllWindows().length === 0) { createWindow() } }) // _dirname Example: win.loadURL(file://${__dirname}/index.html) //view.webContents.openDevTools() // works but in a separate window
-
Hello;
I am getting error: "Uncaught exception: Type error: BrowserView is not a constructor" ??
on this line:
const view = new BrowserView( ) ;
in code below ;
I can't figure out why , because the line above is basically the same:
const win = new BrowserWindow( {width: 600, height: 600, webPreferences: {nodeIntegration: true}
})Thanks
const { BrowserView, BrowserWindow } = require('electron') ; app.on('ready', function() { const win = new BrowserWindow( {width: 600, height: 600, webPreferences: {nodeIntegration: true} }) ; const view = new BrowserView( ) ; // {width: 350, height: 350, webPreferences: {nodeIntegration: true} win.setBrowserView(view) ; win.webContents.loadURL("file:///C:/Electron-js/~~KidSafeBrowser-RESTART/index.html") ; win.webContents.openDevTools() // works in same window view.setBounds({ x: 10, y: 40, width: 750 , height: 500 }) ; view.webContents.loadURL('http://vmars.us/KidSafeBrowser/SafeBrowserHome.html') ; } ) ;
-
It took me a while , but here's the code;
<!DOCTYPE html> <html> <head> <title> AddEventListener-For-A-Tag-Stop-Navigation </title> <script> function CreateJsListener() { document.querySelector('a').addEventListener('click', function(event) {Redirect(event) } ) } ; </script> </head> <body onload="CreateJsListener()"> <a href="https://www.google.com"> https://www.google.com </a> <script> var timesThru = 0 ; function Redirect(event) { event.preventDefault() ; window.open("NOT-A-SafeSite.html"); timesThru = timesThru + 1 ; } </script> </body> </html>
<!DOCTYPE html> <html> <head> <title> NOT-A-SafeSite.html </title> </head> <body> <h4> The Link you clicked on is <span style="color: red">UNSAFE !</span> ....Navigation CANCELED. </h4> </body> </html>
Thank you
-
Ah..... Finally;
<!DOCTYPE html> <html> <head> <title> AddEventListener-For-A-Tag-Stop-Navigation </title> <script> function CreateJsListener() { document.querySelector('a').addEventListener('click', function(event) {Redirect(event) } ) } ; </script> </head> <body onload="CreateJsListener()"> <a href="https://www.google.com"> https://www.google.com </a> <script> var timesThru = 0 ; function Redirect(event) { event.preventDefault() ; window.open("NOT-A-SafeSite.html"); timesThru = timesThru + 1 ; } </script> </body> </html>
<!DOCTYPE html> <html> <head> <title> NOT-A-SafeSite.html </title> </head> <body> <h4> The Link you clicked on is <span style="color: red">UNSAFE !</span> ....Navigation CANCELED. </h4> </body> </html>
Thank you
-
Thanks ishan_shah ;
I had tried this: window.open('https://www.duckduckgo.com' ; 'target= "_blank" ')
But couldn't find the proper format .
Turns out my code above doesn't work , but this works except for one issue:
<!DOCTYPE html> <html> <head> <script> function AddEventListner(){ var timesThru = 0; document.querySelector('a').addEventListener('click', event => { if (timesThru > 0 ) { alert('Opening SecondPage() , timesThru = ' + timesThru ) window.open('https://www.duckduckgo.com', '_blank'); // keeps page one active // window.location.href = "https://www.duckduckgo.com"; // closes page one , opens page two } if (timesThru < 1 ) { alert('timesThru = ' + timesThru) } timesThru = timesThru + 1 ; } )}; </script> </head> <body onload="AddEventListner()"> <a href="https://www.w3schools.com" target="_blank" >Visit W3Schools</a> </body> </html>
1st time thru , it opens the clicked Link .
How can I prevent the '1st time thru Link from opening ?
Thanks for your Help...
-
Thanks Ingolme;
Yes , this works perfectly , the 'href' allows me to keep current window open:
<!DOCTYPE html> <head> <script> function AddEventListner(){ document.querySelector('a').addEventListener('click', event => { OpenSecondPage() }); } </script> <head> </html> <body onload="AddEventListner"()> <a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a> <script> function OpenSecondPage() { window.location.href = "https://www.duckduckgo.com"; // default page }; </script> </body> </html>
Thanks Again
Btw: I miss your foxy Avatar . I would like to have a copy of it possible ?
-
Tia;
Trying to redirect from one page to another page
and still leave 1st page open .
This works except that it closes 1st page:
window.location.href = "https://www.w3schools.com "; // works fine
This doesn't work at all:
window.location.href = "https://www.w3schools.com target="_blank" "; // doesn't work
Full code:
<!DOCTYPE html> <html> <head> <script> function CreateJsListener() { document.querySelector('a').onclick = Redirect(); } </script> </head> <body onload="CreateJsListener()"> <a href="https://www.google.com"> https://www.google.com </a> <script> var timesThru = 0 ; function Redirect() { alert('Redirecting To: https://www.w3schools.com instead'); if (timesThru > 0) { alert('Redirecting To: https://www.w3schools.com instead'); window.location.href = "https://www.w3schools.com target="_blank" "; // doesn't work window.location.href = "https://www.w3schools.com "; // works fine } timesThru = timesThru + 1 ; } </script> </body> </html>
Tia
-
function SpecificSiteLinks(navigateTo) { SafeSite = false ; for (var i = 0; i < specificSiteLinksArray.length; i++) { if (specificSiteLinksArray[i] == navigateTo) { SafeSite = true ; alert("SpecificSiteLinks SafeSite = true " + "navigateTo = " + navigateTo); break ; }else { SafeSite = false ; } } if (SafeSite == false) { alert("SpecificSiteLinks SafeSite = false "+ "navigateTo = " + navigateTo); } }
Ok , I see it now ,
Thanks
-
It keeps looping this message :
alert("SpecificSiteLinks SafeSite = false "+ "navigateTo = " + navigateTo);
-
Tia ;
I need more eyes :
Can't figure out my error in
function SpecificSiteLinks(navigateTo) .
What am I doing wrong , Thanks for your Help...
<!DOCTYPE html> <html> <head> <style> span.buttons { display: inline; /* the default for span */ padding: 5px; } p { border: 1px solid blue; } </style> </head> <body> <div style="text-align: center"> <input type="text" placeholder="Enter URL" id="myInput" value="http://www.google.com"> <button type="button" onclick="getInputValue()" >Get URL</button> </div> <p> <span class="buttons"><button onclick="WholeSite(0)">duckduckgo.com/</button></span> <span class="buttons"><button onclick="SpecificSite(0)">http://vmars.us/SafeBrowser/SafeBrowserHome.html</button></span> </p> <p> <span class="buttons"><button onclick="WholeSite(1)">pbskids.org/</button></span> <span class="buttons"><button onclick="SpecificSite(1)">https://www.infoplease.com/</button></span> </p> <p> <span class="buttons"><button onclick="WholeSite(2)">.sesamestreet.org/</button></span> <span class="buttons"><button onclick="SpecificSite(2)">https://www.youtube.com/watch?v=K1MhFN2Ld30</button></span> </p> <script> var wholeSiteLinksArray= ["duckduckgo.com", "pbskids.org/", ".sesamestreet.org/"]; var specificSiteLinksArray= ["http://vmars.us/SafeBrowser/SafeBrowserHome.html", "https://www.infoplease.com/", "https://www.infoplease.com/" , "https://www.youtube.com/watch?v=K1MhFN2Ld30"]; var NavigateTo = "" ; var SafeSite = false ; var arrayPos = 0 ; function WholeSiteLinks(navigateTo) { SafeSite = false ; for (var i = 0; i < wholeSiteLinksArray.length; i++) { if (wholeSiteLinksArray[i] == navigateTo) { SafeSite = true ; alert("WholeSiteLinks SafeSite = true " + "navigateTo = " + navigateTo); }else { SafeSite = false ; alert("WholeSiteLinks SafeSite = false "+ "navigateTo = " + navigateTo); SpecificSiteLinks(navigateTo); } } } function SpecificSiteLinks(navigateTo) { SafeSite = false ; for (var i = 0; i < specificSiteLinksArray.length; i++) { if (specificSiteLinksArray[i] == navigateTo) { SafeSite = true ; alert("SpecificSiteLinks SafeSite = true " + "navigateTo = " + navigateTo); }else { SafeSite = false ; alert("SpecificSiteLinks SafeSite = false "+ "navigateTo = " + navigateTo); } } } function WholeSite(arrayPos) { navigateTo = wholeSiteLinksArray[arrayPos]; alert("function WholeSite(arrayPos) " + "navigateTo = " + navigateTo); WholeSiteLinks(navigateTo); } function SpecificSite(arrayPos) { navigateTo = specificSiteLinksArray[arrayPos]; alert("function specificSiteLinks(arrayPos)" + "navigateTo = " + navigateTo); SpecificSiteLinks(navigateTo); } function getInputValue(){ // Selecting the input element and get its value var inputURL = document.getElementById("myInput").value; // Displaying the value alert("function getInputValue() " + inputURL); navigateTo = inputURL ; WholeSiteLinks(navigateTo); } </script> </body> </html>
-
Thanks dsonesuk ;
Like this:Quote<script>
//Get the button element
var btn = document.getElementById('button');//Get paragraph element
var makeBold = document.querySelectorAll('p , div');//Define an click event listener on button
btn.addEventListener('click', function() {
for (i = 0; i < makeBold.length; i++) {
makeBold[i].style.fontWeight = '700';
}
});
</script>
Thanks !
-
Tia ;
I want to change all fontWeight of <p and <div>> to bold .
<!DOCTYPE html> <html> <head> <title>Bold Text Demo</title> </head> <body> <p> This is a sample paragraph </p> <button id="button"> Make Bold </button> <div>This is a sample div</div> <script> //Get the button element var btn = document.getElementById('button'); //Get paragraph element var makeBold = document.querySelectorAll(p , div); //Define an click event listener on button btn.addEventListener('click', function() { //Change the font weight style to 700 makeBold.style.fontWeight = '700'; }); </script> </body> </html>
How can I do that ?
Thanks for your Help...
-
Thanks empressia ;
You certainly have gone the extra mile .
Need help querySelector <a> inside of iframe ?
in HTML/XHTML
Posted
Hello ,
I have an html page with an iframe inside .
And I am trying unsuccessfully to querySelect a <a> in the iframe .
function Function_1(){ console.log("Function-1()") const iFrame1 = document.querySelector("iFrame"); console.log(iFrame1) const iFrame1Body = iFrame1.Document.querySelector("a") ; console.log(iFrame1Body) }
No probs with 'querySelector("iFrame")' .
But with 'querySelector("iFrame")' I get error 'Uncaught TypeError: Cannot read property 'querySelector' of undefined' .
Pls , what am I doing wrong ?
Thanks for your Help...