How to load into iframe with jQuery

Question

I am looking to load javascript files into an iframe with jQuery, but it seems the way I am doing it, inspecting the DOM they are there, but they act as if they are in the parent. Here is some of the code:

somejsfile.js:

function createDraggable(draggableId){
    if (jQuery.isFunction(jQuery.fn.draggable)) {
        jQuery('#'+draggableId,fPage).draggable({
            containment: '#contentArea',
            iframeFix: true,
            start: function() {
                dragStart();
            },
            drag: function() {
                dragHappening(draggableId);
            },
            stop: function() {
                dragEnd(draggableId);
            }
        });
    } else {
        setTimeout(function(){createDraggable(draggableId)},100);
    }
}
var fPage = $("#contentFrame").contents();
createDraggable(someElementId);

parent.js:

function loadJS(filepath,w) {
    if (!$("script[src*='"+filepath+"']",w).length) {   
        $("head",w).append('<script type="text/javascript" src="'+filepath+'"></script>');
    }
}
var fPage = $("#contentFrame").contents();
loadJS('jquery.min.js',fPage);
loadJS('jquery.ui.min.js',fPage);
loadJS('jquery.ui.draggable.min.js',fPage);
loadJS('somejsfile.js',fPage);

Now in somejsfile.js, jQuery('#'+draggableId,fPage).draggable({ works, but jQuery('#'+draggableId).draggable({ doesn't, which leads me to believe that it is not really loading in the iframe. When I look in firebug, I see those scripts in the head of the iframe, but I see the draggable function in the main window jQuery, which I didn't load it there.

The reason I don't want it in the main window is that it doesn't work properly as it jumps away from the object when selected and when clicked it stays selected to drag until you click again.

Is the content you're loading coming from the same server as the parent? http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe — Andrew Larsson, Jul 18 '13 at 18:43
Yes they are coming from the same server. I am not getting denied errors or anything. — fanfavorite, Jul 18 '13 at 18:45

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

This question seems to be what I was asking. I changed the loadJS function to:

function loadJS(filepath,w) {
   var script = page.document.createElement("script");
   script.type = "text/javascript";
   script.src = filepath;
   page.document.head.appendChild(script);
}

The w variable passed in should be in this type of format:

frames['contentFrame'].contentWindow

edited May 23 '17 at 10:25

Community

1
1

answered Jul 18 '13 at 20:00

fanfavorite

5,128
1
31
58

score 0 · Answer 2 · edited May 23 '17 at 12:12

this works:

$("#contentFrame").load(function(){
  function loadJS(filepath, iframe) {
    console.log('loading: ', filepath);
    var script = iframe.get(0).contentWindow.document.createElement("script");
        script.type = "text/javascript";
        script.src = filepath;
    iframe.get(0).contentWindow.document.head.appendChild(script);
  }
  var fPage = $("#contentFrame");  
  loadJS('jquery.min.js', fPage);
  loadJS('jquery-ui.min.js', fPage);
  loadJS('jquery.ui.draggable.min.js', fPage);
  loadJS('somejsfile.js', fPage);  
});

Also take a look at this: Why does appending a <script> to a dynamically created <iframe> seem to run the script in the parent page?

How to load into iframe with jQuery

2 Answers2