Jump to content

vmars316

Members
  • Posts

    480
  • Joined

  • Last visited

Posts 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. 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

  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 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...

  8. 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 

     

     

  9. 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 

     

  10. 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') ;
    } ) ;
    
    
    

     

  11. 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  :)

     
  12. 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  :)

  13. 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...

  14. 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 ?

     

  15. 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

     

  16. 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

  17. 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>

     

  18. 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 !

  19. 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...

×
×
  • Create New...