JavaScript Code In Iframe October 30, 2022 Post a Comment I need to run JavaScript code in iframe. But script with id 'us' loaded after creating iframe. How to run this javascript in iframe? #docume</div> <h2 id="solution_1">Solution 1: </h2> <div class="answer-desc"><p>The IFrame has no access to what's outside of it. Everything inside IFrame is separate page ergo you threat it like so. So you do your document.ready in it.</p> <p>Example: <a rel="nofollow noreferrer noopener" href="https://jsfiddle.net/ZTJUB/">http://jsfiddle.net/ZTJUB/</a></p> <pre><code id="code_0" class="hljs language-javascript"><span class="hljs-comment">// Since this is page you wait until it's loaded</span> $(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) { $(<span class="hljs-string">".test"</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) { <span class="hljs-title function_">alert</span>(<span class="hljs-literal">true</span>); }); }); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_0')">Copy</button></pre></div> <br> <h2 id="solution_2">Solution 2: </h2> <div class="answer-desc"><p>The jQuery instance inside of the iFrame doesn't know it's supposed to be traversing the parent DOM, so therefore it won't know where to look for an element with the id "preview"</p> <p>As per my comments above, you should attach to the iframe's document.ready, like this:</p> <pre><code id="code_1" class="hljs language-javascript"><span class="hljs-comment">// Since this is page you wait until it's loaded</span> $(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) { $(<span class="hljs-string">".test"</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) { <span class="hljs-title function_">alert</span>(<span class="hljs-literal">true</span>); }); }); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_1')">Copy</button></pre> <p><strong>EDIT:</strong> Just realizing you are probably having an entirely different issue here - <a rel="nofollow noreferrer noopener" href="https://stackoverflow.com/questions/6102636/html-code-as-iframe-source-rather-than-a-url">Html code as IFRAME source rather than a URL</a> - if you are trying to embed the iframe code inline, you are going to have problems. Take the following code for example:</p> <pre><code id="code_2" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span><span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> Some stuff here <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"preview"</span>></span> <span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://code.jquery.com/jquery-latest.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"us"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="language-javascript"> $(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) { $(<span class="hljs-string">".test"</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) { <span class="hljs-title function_">alert</span>(<span class="hljs-literal">true</span>); }); }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"test"</span>></span>test<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_2')">Copy</button></pre> <p>if you render that page in firefox, and then inspect the source in firebug, you'll see:</p> <pre><code id="code_3" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span><span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> Some stuff here <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"preview"</span>></span> <span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span><span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span><span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_3')">Copy</button></pre> <p>This is happening because the browser isn't expecting to see the code inline between the iframe tags. </p></div> <br> <h2 id="solution_3">Solution 3: </h2> <div class="answer-desc"><p>Since you're not addressing the questions in the comments to better clarify what you are trying to do... I shall assume you are trying to access content <strong>IN</strong> your iframe <strong>FROM</strong> your parent page. Since the other answer should work fine if trying to run it from within the iframe.</p> <p>On the parent page try something like:</p> <pre><code id="code_4" class="hljs language-javascript">$(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) { $(<span class="hljs-string">"#preview"</span>).<span class="hljs-title function_">load</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) $(<span class="hljs-string">"#preview"</span>).<span class="hljs-title function_">contents</span>().<span class="hljs-title function_">find</span>(<span class="hljs-string">".test"</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {<span class="hljs-title function_">alert</span>(<span class="hljs-literal">true</span>);}); }); }); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_4')">Copy</button></pre> <p><em>*This assumes both parent and iframe are on the same domain.</em></p></div> <br> </div> <div id='baca-juga'></div> <script> //<![CDATA[ var bacaJugaJudul=[],bacaJugaNum=0,bacaJugaUrl=[];function bacaJuga(a){for(var u=0;u<a.feed.entry.length;u++){var e=a.feed.entry[u];bacaJugaJudul[bacaJugaNum]=e.title.$t;for(var l=0;l<e.link.length;l++)if("alternate"==e.link[l].rel){bacaJugaUrl[bacaJugaNum]=e.link[l].href,bacaJugaNum++;break}}}function showBacaJuga(a){function u(a,u){u.parentNode.insertBefore(a,u.nextSibling)}var e=document.querySelector("#baca-juga"),l=document.createElement("div"),t=document.querySelector(".post-body-artikel").querySelectorAll("div > br, span > br, div > p, span > p"),r=Math.ceil(.5*t.length),n=document.getElementById("related"),c=(l.setAttribute("class","baca-juga-wrap"),{bacaJuga:!0,jumlahBacaJuga:3,judulBacaJuga:"Baca Juga"});optionLinkMagz(c);if(!0===c.bacaJuga&&void 0!==t[r]){u(e,null!==n?n:t[r]);for(var g=0;g<bacaJugaUrl.length;g++)bacaJugaUrl[g]==a&&(bacaJugaUrl.splice(g,1),bacaJugaJudul.splice(g,1));var J=Math.floor((bacaJugaJudul.length-1)*Math.random()),g=0;if(0<bacaJugaJudul.length&&0<c.jumlahBacaJuga){e.appendChild(l);n=e;null!=(n=n.previousElementSibling)&&"BR"===n.tagName&&(n.style.display="none");for(var i="<strong>"+c.judulBacaJuga+"</strong><ul>";g<bacaJugaJudul.length&&g<c.jumlahBacaJuga;g++)i+='<li><a href="'+bacaJugaUrl[J]+'">'+bacaJugaJudul[J]+"</a></li>",J<bacaJugaJudul.length-1?J++:J=0;l.innerHTML=i+="</ul>"}}} //]]> </script> <script src='/feeds/posts/summary/-/Html?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Iframe?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Javascript?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Jquery?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script> showBacaJuga("https://gdiaperinsertsideas.blogspot.com/2022/10/javascript-code-in-iframe.html"); </script> <div id='share-container'> <div class='share-title'> <p class='share-this-pleaseeeee'>Share</p> </div> <div id='share'> <a aria-label='facebook' class='facebook' href='//www.facebook.com/sharer.php?u=https://gdiaperinsertsideas.blogspot.com/2022/10/javascript-code-in-iframe.html' rel='nofollow noreferrer' title='facebook'> <svg viewBox='0 0 24 24'> <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'></path> </svg> </a> <a aria-label='twitter' class='twitter' href='//twitter.com/intent/tweet?text=JavaScript Code In Iframe&url=https://gdiaperinsertsideas.blogspot.com/2022/10/javascript-code-in-iframe.html' rel='nofollow noreferrer' title='twitter'> <svg viewBox='0 0 24 24'> <path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'></path> </svg> </a> <a aria-label='pinterest' class='pinterest' href='//pinterest.com/pin/create/button/?url=https://gdiaperinsertsideas.blogspot.com/2022/10/javascript-code-in-iframe.html&media=&description=JavaScript Code In Iframe' rel='nofollow noreferrer' title='pinterest'> <svg viewBox='0 0 24 24'> <path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'></path> </svg> </a> <a aria-label='whatsapp' class='whatsapp' href='//api.whatsapp.com/send?phone=&text=JavaScript Code In Iframe%20%2D%20https://gdiaperinsertsideas.blogspot.com/2022/10/javascript-code-in-iframe.html' rel='nofollow noreferrer' title='whatsapp'> <svg viewBox='0 0 24 24'> <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'></path> </svg> </a> <a aria-label='telegram' class='telegram' href='https://t.me/share/url?url=https://gdiaperinsertsideas.blogspot.com/2022/10/javascript-code-in-iframe.html&text=JavaScript Code In Iframe' rel='nofollow noreferrer' target='_blank' title='telegram'> <svg viewBox='0 0 24 24'> <path d='M19.4 3.717l-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42l10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001l-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15l4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z'></path> </svg> </a> </div> </div> <div id='ms-related-post'></div> <script> var postLabels = ["Html", "Iframe", "Javascript", "Jquery", ]; var relatedConfig = { postUrl: "https://gdiaperinsertsideas.blogspot.com/2022/10/javascript-code-in-iframe.html", homePageUrl: "https://gdiaperinsertsideas.blogspot.com/", relatedTitleText: "You may like these posts", }; </script> <div id='ms-matched-content'></div> <script> //<![CDATA[ // related post js from www.dte.web.id modified by sugeng.id !function(){var e,b={relatedTitleOuterOpen:'<div class="related-title"><p class="ms-title">',relatedTitleOuterClose:"</p></div>",relatedTitleText:"Artikel Terkait",thumbWidth:192,thumbHeight:108,imgBlank:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=",relatedOuter:"ms-related-post"};for(e in relatedConfig)"undefined"!=relatedConfig[e]&&(b[e]=relatedConfig[e]);function t(e){var t=document.createElement("script");t.src=e,document.getElementsByTagName("head")[0].appendChild(t)}function v(e){var t,l,a=e.length;if(0===a)return!1;for(;--a;)t=Math.floor(Math.random()*(a+1)),l=e[a],e[a]=e[t],e[t]=l;return e}var B={relatedPosts:!0,jumlahRelatedPosts:4,relatedPostsThumb:!0,judulRelatedPosts:b.relatedTitleText,relatedPostsNoThumbImg:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXMjdP_SV1VVW9dMMj8griJUWi_CNKylDM9zWypZA9ka-usPmfgpWTK5dAmG5s4e9xzA8kSQIxIsZyO_tIVd7l9jp97S9nGHuF-OErGmi8ziH9igSKP1ZJ0lecrxtcJZ8JveSPi6KSbc0/w192-h108-n-k-rw-no-nu/nomage+%25281%2529.png"},l=(optionLinkMagz(B),"object"==typeof postLabels&&0<postLabels.length?"/-/"+v(postLabels)[0]:"");l=l.replace("&","&"),msRelatedPosts=function(e){var t,l,a,s,r,d,o,n,i=b.relatedTitleOuterOpen+B.judulRelatedPosts+b.relatedTitleOuterClose,A=document.getElementById(b.relatedOuter),m=v(e.feed.entry);i+=1==B.relatedPostsThumb?'<ul class="ms-related-hasthumb">':'<ul class="ms-related-nothumb">';for(var u=0;u<m.length;u++)for(var h=0,c=m[u].link.length;h<c;h++)m[u].link[h].href==b.postUrl&&m.splice(u,1);if(0<m.length){for(var g=0;g<B.jumlahRelatedPosts&&g<m.length;g++){l=m[g].title.$t,void 0!==m[g].content&&(r=(s=m[g].content.$t).indexOf("<img",0));function f(e){a=e.replace(/.*?:\/\//g,"//").replace(/s72-(c|.*?-c)/,"w"+b.thumbWidth+"-h"+b.thumbHeight+"-c-rw")}"media$thumbnail"in m[g]?f(m[g].media$thumbnail.url):void 0!==r&&-1!==r?(d=s.indexOf("/>",r),o=(d=s.slice(r,d)).indexOf("src=",0)+5,n=d.indexOf('"',o),f(d.slice(o,n))):a=B.relatedPostsNoThumbImg;for(var p=0,c=m[g].link.length;p<c;p++)t="alternate"==m[g].link[p].rel?m[g].link[p].href:"#";i+='<li><a title="'+l+'" href="'+t+'">'+(1==B.relatedPostsThumb?'<div class="related-thumb-outer"><img alt="'+l+'" class="related-thumb" src="'+a+'" width="'+b.thumbWidth+'" height="'+b.thumbHeight+'"></div>':"")+('<div class="related-title-outer">'+l+"</div>")+"</a></li>"}1==B.relatedPosts&&(A.innerHTML=i+="</ul>")}},msRandomIndex=function(e){e=e.feed.openSearch$totalResults.$t-(B.jumlahRelatedPosts+1),e=1<e?1+Math.floor(Math.random()*e):1;t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/default"+l+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+(B.jumlahRelatedPosts+1)+"&callback=msRelatedPosts")},t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/summary"+l+"?alt=json-in-script&orderby=updated&max-results=0&callback=msRandomIndex")}(); function fullwidthImg(){var t=document.querySelector(".post-body img"),l=document.querySelector(".post-body > .tr-caption-container");l?l.classList.add("fullwidth"):t&&t.classList.add("fullwidth")}!function(){var t={fullwidthImage:!0};optionLinkMagz(t),1==t.fullwidthImage&&fullwidthImg()}(); //]]> </script> </div> <section class='comments comments-non-threaded embed' data-num-comments='0' id='comments'> <a name='comments'></a> <h2 class='comments-title'> Post a Comment for "JavaScript Code In Iframe" </h2> <div id='Blog1_comments-block-wrapper'> </div> <div class='comment-footer'> <div class='comment-form default-comment-form'> <a name='comment-form'></a> <a aria-label='comment form' href='https://www.blogger.com/comment/frame/4595377768860656667?po=6163729826551661482&hl=en&skin=contempo' id='comment-editor-src'></a> <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' title='comment-editor' width='100%'>