如何使用 jQuery 加载到 iframe答案

【问题标题】：How to load into iframe with jQuery如何使用 jQuery 加载到 iframe
【发布时间】：2013-07-18 18:32:41
【问题描述】：

我希望使用 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);

父.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 中看到了可拖动的功能，我没有在那里加载它。

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

【问题讨论】：

您正在加载的内容是否来自与父级相同的服务器？ stackoverflow.com/questions/364952/…
是的，它们来自同一个服务器。我没有被拒绝错误或任何东西。

标签： javascript jquery iframe

【解决方案1】：

这行得通：

$("#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?

【讨论】：

【解决方案2】：

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

【讨论】：