iframe 函数中的 JS 和 jQuery 脚本就像来自父 html答案

【问题标题】：JS & jQuery script inside iframe function as if from parent htmliframe 函数中的 JS 和 jQuery 脚本就像来自父 html
【发布时间】：2020-03-17 10:33:24
【问题描述】：

以下代码位于已加载到 iframe #contframe 源 html 中的脚本中。该按钮位于 iframe 内。

为什么这仅在我引用该函数时才有效，就好像它来自父 HTML 一样？

例如，以下代码有效：

$(document).ready(function() {
  var kuf = $('#contframe').contents().find('#zbtn');
  kuf.click(function() {
    alert("hello");  
  });
});

但是下面的函数根本不起作用：

$(document).ready(function() {
  $('#zbtn').click(function() {
    alert("oi");
  });
});

【问题讨论】：

这是因为 iframe 的内容是与父页面完全不同的 DOM。这就是为什么您需要通过contents() 访问它的原因
@RoryMcCrossan：OP 似乎暗示此代码已加载到 iframe 中。不过不确定。
是的，它说明按钮在 iframe 中，但没有说明 JS 的位置。鉴于contents() 的工作用途，我只能假设它在父页面中。
脚本不在原始html中。
也许如果您没有过多地编辑我的问题，这将是有道理的。该脚本从 iframe 内部运行。

标签： javascript jquery iframe

【解决方案1】：

我完全附加了我的脚本；我相信使用 doc.createElement 解决了这个问题。

以下解决了我的问题 - Andriy F. https://stackoverflow.com/a/13344966/10824788 的一些细微修改

//CREATES NEW JS & CSS TAGS RESPECTIVELY
function insertScript(doc, target, src, callback) {
var insertjs = doc.createElement("script");
insertjs.type = "text/javascript";
insertjs.src = src;
target.appendChild(insertjs);
}
function insertCss(doc, target, href, callback) {
var insertcss = doc.createElement("link");
insertcss.type = "text/css";
insertcss.rel = "stylesheet";
insertcss.href = href;
target.appendChild(insertcss);    
}

//ADDS ABOVE TO IFRAME
$('#contframe').on('load', function(){
var context = this.contentDocument;
var frameHead = context.getElementsByTagName('head').item(0);
insertScript(context, frameHead, '/scripts/jquery.min.js');
insertScript(context, frameHead, '/scripts/content.js');
insertCss(context, frameHead, '/scripts/content.css');
});

【讨论】：