Question

我的工作知识基础。我正在尝试在iFrame实例中获得完整的html w /脚本设置。

以下是我的设置的Chrome扩展。当我点击div/iframe中的按钮时，出现Uncaught ReferenceError: test is not defined错误。

思想？

enter image description here

Answer 1

http://bytes.com/topic/javascript/answers/153274-script-iframe-can-not-call-functions-defined-parent-document

每个链接：函数不是文档的属性，而是窗口的属性。尝试 parent.foo(); 要么 top.foo();

<button onclick='parent.test();'>test</button> 工作现在...... top.test()也可以，但是，我想要一种规范化的方法。它不是很直观。

有没有办法不必前缀top.或parent.？

Answer 2

确保在<head>部分中的任何其他脚本之前调用jQuery库。

我大多数时候都会收到此错误，我只是更改了页面上调用脚本的顺序（总是在jQuery下），它解决了问题。

Answer 3

这是一个迟到的答案，但我会分享我的解决方案。

我需要一个iframe作为预览容器。所以parent.something将是一个麻烦。

这似乎有效：

<iframe id='iframe' sandbox="allow-same-origin allow-scripts"></iframe>

用这个填充它（使用jquery的例子）：

$(function() {

    let $iframe = $('#iframe');
    $iframe.ready(function() {

       let ifhead = `
       <meta charset="UTF-8"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"><\/script>`;
       let ifbody = `<h1>My Body</h1>`;
       let ifscript = `$(function() { $('h1').css('color', 'blue')})`;
       let html = `<html><head>${ifhead}</head><body>${ifbody}<script>${ifscript}<\/script></body></html>`; 


       document.getElementById("iframe").contentWindow.document.open();
       document.getElementById("iframe").contentWindow.document.write(html);
       document.getElementById("iframe").contentWindow.document.close();

    });

});

现在，iframe充当独立页面。

使用嵌入在iFrame中的脚本获取未定义的错误

3 个答案: