在 iframe 中调用 javascript 函数

IT技术 javascript function iframe
2021-01-30 18:59:39

我在iframe从父页面调用 JavaScript 函数时遇到问题。这是我的两个页面：

主页.html

<html>
<head>
    <title>MainPage</title>
    <script type="text/javascript">
        function Reset() 
        {
            if (document.all.resultFrame)
                alert("resultFrame found");
            else
                alert("resultFrame NOT found");

            if (typeof (document.all.resultFrame.Reset) == "function")
                document.all.resultFrame.Reset();
            else
                alert("resultFrame.Reset NOT found");
        }
    </script>
</head>
<body>
    MainPage<br>
    <input type="button" onclick="Reset()" value="Reset"><br><br>
    <iframe height="100" id="resultFrame" src="resultFrame.html"></iframe>
</body>
</html>

结果框架.html

<html>
<head>
    <title>ResultPage</title>
    <script type="text/javascript">
        function Reset() 
        {
            alert("reset (in resultframe)");
        }
    </script>
</head>
<body>
    ResultPage
</body>
</html>

（我知道document.all不建议这样做，但此页面只能在内部使用 IE 查看，我认为这不是问题）

当我按下重置按钮时，我得到“resultFrame found”和“resultFrame.Reset NOT found”。好像有frame的引用，但是不能调用frame上的函数，这是为什么呢？

6个回答

利用：

document.getElementById("resultFrame").contentWindow.Reset();

访问 iframe 中的重置功能

document.getElementById("resultFrame") 将在您的代码中获取 iframe，并将在 iframe 中contentWindow获取 window 对象。一旦有了子窗口，就可以在该上下文中引用 javascript。

另请参阅此处 ，特别是 bobince 的回答。

嗨乔纳森， .contentWindow 仍然有效吗？我这样做了，console.log(document.getElementById('iframeID').contentWindow)并且在 Firebug 中，它test()在 iframe 中正确显示了我的函数，但是当我调用该函数时，它说它不是函数，但它是！在FF4中测试它。
2021-03-18 18:59:39

为了更加稳健：

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

和 

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.reset();
  ...
}
...

不要从文档中获取框架，而是尝试从窗口对象中获取框架。

在上面的例子中改变这个：

if (typeof (document.all.resultFrame.Reset) == "function")
    document.all.resultFrame.Reset();
else
    alert("resultFrame.Reset NOT found");

到

if (typeof (window.frames[0].Reset) == "function")
    window.frames[0].Reset();
else
    alert("resultFrame.Reset NOT found");

问题是 iframe 内 javascript 的范围没有通过 iframe 的 DOM 元素公开。只有窗口对象包含框架的 javascript 范围信息。

称呼

window.frames['resultFrame'].Reset();

objectframe.contentWindow.Reset() 您首先需要引用框架中的顶级元素。

其它你可能感兴趣的问题
上一篇如何阻止页面在 JS 中卸载（导航）？ 下一篇Django csrf 令牌 + Angularjs