Question

我希望用jQuery将javascript文件加载到iframe中，但看起来我正在这样做，检查它们在那里的DOM，但它们就好像它们在父级中一样。以下是一些代码：

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);

现在在somejsfile.js中，jQuery('#'+draggableId,fPage).draggable({有效，但jQuery('#'+draggableId).draggable({没有，这让我相信它并没有真正加载到iframe中。当我查看firebug时，我在iframe的头部看到了那些脚本，但是我在主窗口jQuery中看到了draggable函数，我没有在那里加载它。

我不希望它出现在主窗口中的原因是它无法正常工作，因为它在选中时跳离对象，单击它时会保持选中状态直到再次单击为止。

Answer 1

This question似乎就是我的要求。我将loadJS函数更改为：

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

传入的w变量应采用以下格式：

frames['contentFrame'].contentWindow

Answer 2

这有效：

$("#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);  
});

另请看一下：Why does appending a <script> to a dynamically created <iframe> seem to run the script in the parent page?

如何使用jQuery加载到iframe

2 个答案: