{"id":13066,"date":"2016-06-08T16:15:08","date_gmt":"2016-06-08T13:15:08","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=13066"},"modified":"2018-01-10T16:30:11","modified_gmt":"2018-01-10T14:30:11","slug":"javascript-frame-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-frame-example\/","title":{"rendered":"Javascript Frame Example"},"content":{"rendered":"

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.<\/p>\n

Iframes, or inline frames, allow you to load separate HTML files into an existing document.Iframes can be placed anywhere in the html document.<\/p>\n

JavaScript 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.
\n 
\n[ulp id=’tCIwOngQUb3zSUuF’]<\/p>\n

1. HTML<\/h2>\n

First of all you need to create two simple html documents.<\/p>\n

iframeExample.html<\/em><\/span><\/p>\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<\/pre>\n
2. Javascript IFrame Example<\/h2>\n
2.1 Change iframe src by using javascript<\/h3>\n
Let us add the following html code to our page.<\/p>\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<\/pre>\n
You can get a reference to an iframe using getElementById()<\/code>. You can use that reference to set properties on the iframe, such as style,src and so on.<\/p>\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<\/pre>\n
The result in the browser would be:<\/p>\n
\"Chnage<\/a>
Change iframe src by using javascript<\/figcaption><\/figure>\n
2.2 Access to Iframe and its Document and Content<\/h3>\n
The buttons in the following html code will access the iframe data by using contentWindow and contentDocument properties.<\/p>\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<\/pre>\n
The 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.<\/p>\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<\/pre>\n
The result in the browser would be:<\/p>\n
\"Access<\/a>
Access to Iframe and its Document and Content<\/figcaption><\/figure>\n
2.3 JavaScript Interaction between Iframe and Parent<\/h3>\n
First of all add the following html code to the iframeExample.html<\/em><\/span> page.<\/p>\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<\/pre>\n
Create a new page and add following code . parented.html<\/em><\/span><\/p>\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<\/pre>\n
It 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.<\/p>\n
The 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.<\/p>\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<\/pre>\n
The result in the browser would be:<\/p>\n
\"javascriptIframeExample3\"<\/a>
JavaScript Interaction between Iframe and Parent<\/figcaption><\/figure>\n
2.4 Dynamically Generating an Iframe<\/h3>\n
On 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.<\/p>\n
       <h1>Dynamically Generating an Iframe<\/h1>\r\n       <p id=\"marker\" class=\"end\">Iframes Examples<\/p>\r\n<\/pre>\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<\/pre>\n
3. Download the Source Code<\/h2>\n
Download: <\/strong>You can download the full source code of this example here: Javascript Iframe Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
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. Iframes, or inline frames, allow you to …<\/p>\n","protected":false},"author":106,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-13066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"\nJavascript Frame Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this tutorial is to describe and demonstrate using JavaScript to manipulate and interact with iframes, showing how to access and modify\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-frame-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript Frame Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this tutorial is to describe and demonstrate using JavaScript to manipulate and interact with iframes, showing how to access and modify\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-frame-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-08T13:15:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-10T14:30:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Saeb Najim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saeb Najim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@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\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Javascript Frame Example - Web Code Geeks - 2026","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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-frame-example\/","og_locale":"en_US","og_type":"article","og_title":"Javascript Frame Example - Web Code Geeks - 2026","og_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","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-frame-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-06-08T13:15:08+00:00","article_modified_time":"2018-01-10T14:30:11+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Saeb Najim","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Saeb Najim","Est. reading time":"6 minutes"},"schema":{"@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\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/13066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=13066"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/13066\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=13066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=13066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=13066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}