Question

如何在父窗口中调用iframe函数，我做了类似下面的操作，但似乎没有在firefox中工作。相同的代码在chrome中完美运行。

window.frames["original_preview_iframe"].window.exportAndView(img_id);

Answer 1

我认为你必须使用

的document.getElementById（ 'target_Frame'）contentWindow.callingtargetFunction（）;

否则使用此网址描述您的问题的解决方案

Invoking JavaScript code in an iframe from the parent page

Answer 2

选择'iframe后尝试不输入窗口：

window.frames["original_preview_iframe"].exportAndView(img_id);

Answer 3

会建议https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

明确适用于我的wiki示例：

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello B', 'http://example.com/');

然后在iframe中：

function receiver(event) {
    if (event.origin == 'http://example.net') {
        if (event.data == 'Hello B') {
            event.source.postMessage('Hello A, how are you?', event.origin);
        }
        else {
            alert(event.data);
        }
    }
}
window.addEventListener('message', receiver, false);

（https://en.wikipedia.org/wiki/Web_Messaging。）

Answer 4

有几种方法可以调用iframe函数。
我们假设您的iframe ID为original_preview_iframe

方法1

您可以使用document.getElementById("original_preview_iframe").contentWindow.exportAndView()进行触发。

方法2

使用window.frames。
window.frames是一个数组，您可以在“ test.html”中使用window.name="this is iframe test"设置iframe名称。
然后，您可以迭代数组，比较名称，然后触发它。

for (let i = 0; i < window.frames.length; i++) {
    if (window.frames[i].name === "this is iframe test") {
        window.frames[i].exportAndView()
    }
}

方法3

使用postMessage。
在way1和way2中，您需要在window对象中分配功能。

<body>
<script>
// this one
window.exportAndView = function(){}
// or this one
function exportAndView(){}
</script>
</body>

在Way3中，您可以隐藏exportAndView，然后也可以触发它。
这是一个例子。

// a.html
<html>
<body>
        <iframe id="original_preview_iframe" src="/b.html">
        </iframe>
        <script>
            // let postMessage trigger after b.html load
            setTimeout(function(){
                document.getElementById("original_preview_iframe").contentWindow.postMessage({data: "hi"});
            }, 500)
        </script>
</body>
</html>

// b.html (iframe html)
<html>
<body>
    <script>
        (function() {
            function exportAndView() {
                console.log("test");
            }
            window.addEventListener("message", (event) => {
                exportAndView()
            })
        })()
    </script>
</body>
</html>

然后在a.html中，您可以尝试使用way1或way2，例如document.getElementById("original_preview_iframe").contentWindow.exportAndView()。
由于范围问题，exportAndView不会被称为。

在父窗口中调用iframe函数

4 个答案:

方法1

方法2

方法3