Jump to content

vmars316

Members
  • Posts

    480
  • Joined

  • Last visited

Everything posted by vmars316

  1. 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...
  2. Yes I am working on it . All day this one has me stumped: This line: const myIframe = document.getE1ementById("myIframe") ; What's wrong with it ? Thanks
  3. 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
  4. 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
  5. 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...
  6. 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>
  7. Hello; I found exactly what I need here: https://gist.github.com/erickzhao/3f2141be4c6d84c3028742b8998e0f6e
  8. Thanks niche I ended using #mainDiv { text-align: center; width: 55%; background-color: #ffffff; padding: 4px; white-space: nowrap; Thanks
  9. 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>&nbsp;&nbsp;&nbsp;&nbsp;</span> <button id="back">Back</button> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <button id="forward">Forward</button> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <button id="refresh">Refresh</button> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <button id="home">Home</button> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <input id="url" style="width: 200px;" type="url" value="http://vmars.us/KidSafeBrowser/"/> <span>&nbsp;&nbsp;&nbsp;&nbsp;</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...
  10. 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
  11. Yes it is here: ttps://www.electronjs.org/docs/api/webview-tag
  12. 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-view My 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
  13. 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') ; } ) ;
  14. 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> &nbsp; ....Navigation CANCELED. </h4> </body> </html> Thank you
  15. 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> &nbsp; ....Navigation CANCELED. </h4> </body> </html> Thank you
  16. 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...
  17. 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 ?
  18. 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
  19. 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
  20. It keeps looping this message : alert("SpecificSiteLinks SafeSite = false "+ "navigateTo = " + navigateTo);
  21. 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>
  22. 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...
  23. Thanks empressia ; You certainly have gone the extra mile .
×
×
  • Create New...