Javascript 在父窗口中调用iframe函数_Javascript_Jquery_Iframe

Javascript 在父窗口中调用iframe函数

javascript jquery iframe

Javascript 在父窗口中调用iframe函数,javascript,jquery,iframe,Javascript,Jquery,Iframe,如何在父窗口中调用iframe函数，我做了如下操作，但在firefox中似乎不起作用。同样的代码在chrome中工作得很好 window.frames["original_preview_iframe"].window.exportAndView(img_id); 尝试在“选择”iframe后不键入window： window.frames["original_preview_iframe"].exportAndView(img_id); function receiver(event) {

如何在父窗口中调用iframe函数，我做了如下操作，但在firefox中似乎不起作用。同样的代码在chrome中工作得很好

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

尝试在“选择”iframe后不键入window：

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

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);

尝试在“选择”iframe后不键入window：

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

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);

我想你必须使用

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

否则，请使用此url描述问题的解决方案

我想你得用

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

否则，请使用此url描述问题的解决方案

会建议这样做

清除对我有用的wiki示例：

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

然后在iframe中：

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

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);

（）

会建议这样做

清除对我有用的wiki示例：

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

然后在iframe中：

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

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);

（。

调用iframe函数有几种方法。
我们假设您的iframe id是

original\u preview\u iframe

方式1 您可以使用

document.getElementById（“原始预览”\u iframe”）.contentWindow.exportAndView（）

来触发

方式2 使用

window.frames

window.frames

是一个数组，您可以使用“test.html”中的

window.name=“这是iframe测试”

设置iframe名称
然后可以迭代数组，比较名称，然后触发它

for（设i=0；i


方式3
使用postMessage。

在way1和way2中，您需要在窗口中指定函数
对象
<body>
<script>
// this one
window.exportAndView = function(){}
// or this one
function exportAndView(){}
</script>
</body>


//这个
window.exportAndView=函数（）{}
//还是这个
函数exportAndView（）{}

在方法3中，您可以隐藏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
//让postMessage在加载b.html后触发
setTimeout（函数（）{
document.getElementById（“original_preview_iframe”）.contentWindow.postMessage（{data:“hi”}）；
}, 500)
//b.html（iframe-html）
（功能（）{
函数exportAndView（）{
控制台日志（“测试”）；
}
window.addEventListener（“消息”，“事件）=>{
exportAndView（）
})
})()

然后在a.html中，您可以尝试使用way1或way2，如document.getElementById（“原始预览”\u iframe”）.contentWindow.exportAndView（）


由于作用域问题，将不调用exportAndView。
调用iframe函数有几种方法。

我们假设您的iframe id是original\u preview\u iframe

方式1
您可以使用document.getElementById（“原始预览”\u iframe”）.contentWindow.exportAndView（）
来触发
方式2
使用window.frames


window.frames
是一个数组，您可以使用“test.html”中的window.name=“这是iframe测试”
设置iframe名称

然后可以迭代数组，比较名称，然后触发它
for（设i=0；i

方式3
使用postMessage。

在way1和way2中，您需要在窗口中指定函数
对象
<body>
<script>
// this one
window.exportAndView = function(){}
// or this one
function exportAndView(){}
</script>
</body>


//这个
window.exportAndView=函数（）{}
//还是这个
函数exportAndView（）{}

在方法3中，您可以隐藏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
//让postMessage在加载b.html后触发
setTimeout（函数（）{
document.getElementById（“original_preview_iframe”）.contentWindow.postMessage（{data:“hi”}）；
}, 500)
//b.html（iframe-html）
（功能（）{
函数exportAndView（）{
控制台日志（“测试”）；
}
window.addEventListener（“消息”，“事件）=>{
exportAndView（）
})
})()

然后在a.html中，您可以尝试使用way1或way2，如document.getElementById（“原始预览”\u iframe”）.contentWindow.exportAndView（）


由于范围问题，将不会调用导出和查看