René's URL Explorer Experiment

{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/#article","isPartOf":{"@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/"},"author":{"name":"Saeb Najim","@id":"https://www.webcodegeeks.com/#/schema/person/7554117e1066be33eda4c81bac192cc9"},"headline":"Javascript Frame Example","datePublished":"2016-06-08T13:15:08+00:00","dateModified":"2018-01-10T14:30:11+00:00","mainEntityOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/"},"wordCount":503,"commentCount":1,"publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https://www.webcodegeeks.com/javascript/javascript-frame-example/#respond"]}]},{"@type":"WebPage","@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/","url":"https://www.webcodegeeks.com/javascript/javascript-frame-example/","name":"Javascript Frame Example - Web Code Geeks - 2026","isPartOf":{"@id":"https://www.webcodegeeks.com/#website"},"primaryImageOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/#primaryimage"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","datePublished":"2016-06-08T13:15:08+00:00","dateModified":"2018-01-10T14:30:11+00:00","description":"The aim of this tutorial is to describe and demonstrate using JavaScript to manipulate and interact with iframes, showing how to access and modify","breadcrumb":{"@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.webcodegeeks.com/javascript/javascript-frame-example/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/#primaryimage","url":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https://www.webcodegeeks.com/javascript/javascript-frame-example/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.webcodegeeks.com/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https://www.webcodegeeks.com/category/javascript/"},{"@type":"ListItem","position":3,"name":"Javascript Frame Example"}]},{"@type":"WebSite","@id":"https://www.webcodegeeks.com/#website","url":"https://www.webcodegeeks.com/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.webcodegeeks.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://www.webcodegeeks.com/#organization","name":"Exelixis Media P.C.","url":"https://www.webcodegeeks.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/logo/image/","url":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https://www.webcodegeeks.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/webcodegeeks","https://x.com/webcodegeeks"]},{"@type":"Person","@id":"https://www.webcodegeeks.com/#/schema/person/7554117e1066be33eda4c81bac192cc9","name":"Saeb Najim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g","caption":"Saeb Najim"},"description":"Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.","sameAs":["http://www.webcodegeeks.com/","https://www.linkedin.com/in/saebnajim"],"url":"https://www.webcodegeeks.com/author/saeb-najim/"}]}

{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","@id":"#Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https:\/\/www.webcodegeeks.com\/"}},{"@type":"ListItem","position":2,"item":{"name":"JavaScript","@id":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"}}]}

{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2016-06-08T16:15:08+03:00","datePublished":"2016-06-08T16:15:08+03:00","dateModified":"2018-01-10T16:30:11+02:00","headline":"Javascript Frame Example","name":"Javascript Frame Example","keywords":[],"url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-frame-example\/","description":"The aim of this tutorial is to describe and demonstrate using JavaScript to manipulate and interact with iframes, showing how to access and modify properties of the iframe element, how to communicate","copyrightYear":"2016","articleSection":"JavaScript","articleBody":"The aim of this tutorial is to describe and demonstrate using JavaScript to manipulate and interact with iframes, showing how to access and modify properties of the iframe element, how to communicate with the document inside the iframe, getting information from the iframe and passing information to it.\r\n\r\nIframes, or inline frames, allow you to load separate HTML files into an existing document.Iframes can be placed anywhere in the html document.\r\n\r\nJavaScript can be used to manipulate the appearance and properties of the iframe element , its position, size, and src, for example. JavaScript can also be used to pass data between the html document containing the iframe and the iframe itself.\r\n \r\n\r\n1. HTML\r\nFirst of all you need to create two simple html documents.\r\n\r\niframeExample.html\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Javascript IFrame Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n2. Javascript IFrame Example\r\n2.1 Change iframe src by using javascript\r\nLet us add the following html code to our page.\r\n<div>\r\n\t<iframe id=\"ifrm\" src=\"https:\/\/www.webcodegeeks.com\/\" width=\"500\" height=\"300\"><\/iframe>\r\n<\/div>\r\n<div>\r\n\t<a href=\"javascript:retrun 0;\" onclick=\"changeIframePro()\">change iframe src<\/a>\r\n<\/div>\r\n\r\nYou can get a reference to an iframe using getElementById(). You can use that reference to set properties on the iframe, such as style,src and so on.\r\n<script type=\"text\/javascript\">\r\n\r\nfunction changeIframePro(){\r\n\t\/\/ reference to iframe with id 'ifrm'\r\n\tvar ifrm = document.getElementById('ifrm');\r\n\tifrm.src = 'http:\/\/www.iliastsagklis.com\/'; \/\/ set src to new url\r\n}\r\n\r\n<\/script>\r\n\r\nThe result in the browser would be:\r\n\r\n\r\n2.2 Access to Iframe and its Document and Content\r\nThe buttons in the following html code will access the iframe data by using contentWindow and contentDocument properties.\r\n<h1>Accessing an Iframe and its Document and Content<\/h1>\r\n<p>This example demonstrates the containing document interacting with the iframe.<\/p>\r\n<form id=\"demoForm\" action=\"#\">\r\n    <p>\r\n        <input name=\"button1\" type=\"button\" value=\"Button 1\" onclick=\"button1Handler()\"\/>\r\n        <input name=\"button2\" type=\"button\" value=\"Button 2\" onclick=\"button2Handler()\"\/> \r\n        <input name=\"button3\" type=\"button\" value=\"Button 3\" onclick=\"button3Handler()\"\/> \r\n        <input name=\"button4\" type=\"button\" value=\"Button 4\" onclick=\"button4Handler()\"\/> \r\n    <\/p>\r\n    <p><input type=\"text\" name=\"display\" size=\"30\" readonly=\"readonly\" \/><\/p>\r\n<\/form>\r\n\r\n<iframe name=\"ifrm\" id=\"ifrm\" src=\"iframed.html\" width=\"450\" height=\"250\"><\/iframe>\r\n\r\nThe iframe element provides contentWindow and contentDocument properties. The following JavaScript uses these properties to get references to the iframed document's window and document objects. Once you have references to the window and document objects, you can access virtually any object or property in the iframed document and can access it's javascript varibales and methods.\r\n<script type=\"text\/javascript\">\r\n\r\n    \/\/ get reference to the form \r\n    var form = document.getElementById('demoForm');\r\n    \r\n    \/\/ set height of iframe and display value\r\n    function button1Handler(){\r\n        var ifrm = document.getElementById('ifrm');\r\n        var ht = ifrm.style.height = '200px';\r\n        form.display.value = 'The iframe\\'s height is: ' + ht;\r\n    }\r\n    \r\n    \/\/ increment and display counter variable contained in iframed document\r\n    function button2Handler() {\r\n        \/\/ get reference to iframe window\r\n        var win = document.getElementById('ifrm').contentWindow;\r\n        var counter = ++win.counter; \/\/  increment\r\n        form.display.value = 'counter in iframe is: ' + counter;\r\n    }\r\n    \r\n    \/\/ reference form element in iframed document\r\n    function button3Handler() {\r\n        \r\n        var ifrm = document.getElementById('ifrm');\r\n        \/\/ reference to document in iframe\r\n        var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;\r\n        \/\/ get reference to greeting text box in iframed document\r\n        var fld = doc.forms['iframeDemoForm'].elements['greeting'];\r\n        var val = fld.value;\r\n        \/\/ display value in text box\r\n        form.display.value = 'The greeting is: ' + val;\r\n    }\r\n    \r\n    function button4Handler(){\r\n        \/\/ get reference to iframe window\r\n        var win = document.getElementById('ifrm').contentWindow;\r\n        win.clearGreeting(); \/\/ call function in iframed document\r\n    }\r\n\r\n<\/script>\r\n\r\nThe result in the browser would be:\r\n\r\n\r\n2.3 JavaScript Interaction between Iframe and Parent\r\nFirst of all add the following html code to the iframeExample.html page.\r\n<h1>References from Iframed Document to its Parent<\/h1>\r\n<p>This example demonstrates access from iframed document to containing document.<\/p>\r\n<iframe name=\"ifrm\" id=\"ifrm\" src=\"parented.html\" width=\"450\" height=\"250\"><\/iframe>\r\n\r\n<form action=\"#\" id=\"demoForm\">\r\n    <label for=\"greeting\">Enter a Greeting: <\/label>\r\n    <input type=\"text\" name=\"greeting\" id=\"greeting\" value=\"Hello there!\" \/>\r\n<\/form>\r\n\r\n<script type=\"text\/javascript\">\r\n    var counter = 0;\r\n<\/script>\r\n\r\nCreate a new page and add following code . parented.html\r\n<form action=\"#\" id=\"iframeDemoForm\">\r\n    <p><input name=\"button1\" type=\"button\" value=\"Click Me\" \/> repeatedly to increment global variable in containing document<\/p>\r\n    <p><input name=\"button2\" type=\"button\" value=\"Click Me\" \/> to transfer Greeting below to text box above<\/p>\r\n<\/form>\r\n\r\nIt is simpler to use the parent property to access the containing document. For example, you can reference a form in the containing document,notice line 9 of the following javascript code.\r\n\r\nThe parent keyword can also be used to access global variables or invoke functions in the main document from the document inside the iframe, as the example below demonstrates.\r\n<script type=\"text\/javascript\">\r\n\r\n(function() {\r\n    \/\/ get reference to form to attach button onclick handlers\r\n    var form = document.getElementById('iframeDemoForm');\r\n    \/\/ increment and display counter variable contained in parent document\r\n    form.elements['button1'].onclick = function() {\r\n        parent.counter++;\r\n        var parentCounter = 'counter in parent document is: ' + parent.counter;\r\n        this.form.elements['display'].value = parentCounter;\r\n    }\r\n\r\n    form.elements.button2.onclick = function() {\r\n        \/\/ get reference to greeting text box in containing document\r\n        var fld = parent.document.forms['demoForm'].elements['greeting'];\r\n        var val = fld.value;\r\n        \/\/ display value in iframed document's text box\r\n        this.form.elements.display.value = 'The greeting is: ' + val;\r\n    }\r\n})(); \/\/ end remove from global namespace and invoke\r\n<\/script>\r\n\r\nThe result in the browser would be:\r\n\r\n\r\n2.4 Dynamically Generating an Iframe\r\nOn this page, JavaScript is used to create an iframe element and insert it into the document. The createElement method is used to dynamically generate the iframe. Either the appendChild or insertBefore method can be used to place the iframe in the document. The setAttribute method can be used to add id, src, and other attributes.Following html and javascript demonstrates the dynamically generating of Iframe.\r\n       <h1>Dynamically Generating an Iframe<\/h1>\r\n       <p id=\"marker\" class=\"end\">Iframes Examples<\/p>\r\n\r\n<script type=\"text\/javascript\">\r\n(function() {\r\n    var ifrm = document.createElement('iframe');\r\n    ifrm.setAttribute('id', 'ifrm');\r\n\r\n    \/\/ to place before another page element\r\n    var el = document.getElementById('marker');\r\n    el.parentNode.insertBefore(ifrm, el);\r\n\r\n    ifrm.setAttribute('src', 'http:\/\/www.webcodegeeks.com');\r\n})(); \r\n<\/script>\r\n\r\n3. Download the Source Code\r\nDownload: You can download the full source code of this example here: Javascript Iframe Example","publisher":{"@id":"#Publisher","@type":"Organization","name":"Web Code Geeks","logo":{"@type":"ImageObject","url":"\/wp-content\/uploads\/2015\/12\/WebCodeGeeks-logo.png"},"sameAs":["http:\/\/feeds.feedburner.com\/WebCodeGeeks","https:\/\/www.facebook.com\/webcodegeeks","https:\/\/twitter.com\/webcodegeeks","https:\/\/www.youtube.com\/channel\/UCcJkBzpdp8TWzzu0bSjzikw","https:\/\/github.com\/webcodegeeks"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-frame-example\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Saeb Najim","url":"https:\/\/www.webcodegeeks.com\/author\/saeb-najim\/"},"image":{"@type":"ImageObject","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":1200,"height":150}}