Home/ Questions/Q 7948269
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:40:36+00:00

I’m writing a script which requires some stuff to be carried out in an

  • 0

I’m writing a script which requires some stuff to be carried out in an iframe. It’s a userscript for a site which I do not own, so because of cross-domain issues, I cannot just set the src of the iframe to a page with my own code. Instead, I am dynamically building the iframe.

To do this, I have 

 function childScripts(){
  //Stuff that must be injected into the iframe.
  //Needs jQuery
 }


 //because I'm lazy:
 var iframeWin=$('#my-iframe')[0].contentWindow;

 //Load jQuery:
 var script = iframeWin.document.createElement("script");
 script.type = "text/javascript";
 script.src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
 iframeWin.document.head.appendChild(script);

 //Inject script
 var script = iframeWin.document.createElement("script");
 script.type = "text/javascript";
 script.textContent="("+childScripts.toString()+")()";
 iframeWin.document.body.appendChild(script);

Now, the injected script needs jQuery, but for some reason, jQuery isn’t loaded when the injected script runs–even though jQuery is in <head> and the injected script is in <body>.

I’ve tried other workarounds–making the injected script run onload. I don’t like the idea of setting a timeout and checking for the existence of jQuery, I’d prefer a more elegant solution.

I’ve also tried copying the $ object to iframeWin.$, but of course that doesn’t work, since it just backreferences to the parent $ and manipulates the parent document.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s easier to manipulate iframes using jQuery. Please try:

    $('<iframe id="my-iframe"/>').load(function(){
  $('#my-iframe').contents().find('body').append('asd').end()
                            .find('body').append('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>').end()
                            .find('body').append('<script>$(function() {alert("hello from jquery");console.log("hello from jquery"); })<\/script>');                             

}).appendTo("body");

    Placement:

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script> 
        $('<iframe id="my-iframe"/>').load(function(){..... 
    </script> 
</body> 
</html>
    • 0