admin管理员组

文章数量:1314496

How can i call iframe function in parent window, i did something like below but not seems working in firefox. Same code working perfectly in chrome.

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

How can i call iframe function in parent window, i did something like below but not seems working in firefox. Same code working perfectly in chrome.

window.frames["original_preview_iframe"].window.exportAndView(img_id);
  • javascript
  • jquery
  • iframe
Share Improve this question edited May 2, 2013 at 11:29 Sudhir Bastakoti 100k15 gold badges161 silver badges167 bronze badges asked May 2, 2013 at 11:25 Mangesh NarayankarMangesh Narayankar 5912 gold badges5 silver badges5 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

i think you have to use

document.getElementById('target_Frame').contentWindow.callingtargetFunction();

otherwise use this url describes solution for your problem

Invoking JavaScript code in an iframe from the parent page

Try to not type window after you 'selected' the iframe:

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

Would suggest this https://developer.mozilla/en-US/docs/Web/API/Window/postMessage

Clear wiki example that worked for me:

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

And then in the iframe:

function receiver(event) {
    if (event.origin == 'http://example') {
        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/wiki/Web_Messaging.)

There are several ways to call the iframe function.
We assume you iframe id is original_preview_iframe

Way 1

You can use document.getElementById("original_preview_iframe").contentWindow.exportAndView() to trigger.

Way 2

Use window.frames.
window.frames is an array, you can set the iframe name with window.name="this is iframe test" in "test.html"
Then you can iterator the array, and pare the name, then trigger it.

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

Way 3

Use postMessage.
In the way1 and way2, you need to assign function in the window object.

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

In the Way3, you can hide the exportAndView then you also can trigger it.
Here is an example.

// 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>

Then in a.html, you can try use the way1 or way2, like document.getElementById("original_preview_iframe").contentWindow.exportAndView().
exportAndView will not be called becuase the scope problem.

本文标签： javascriptCall iframe function in parent windowStack Overflow

版权声明：本文标题：javascript - Call iframe function in parent window - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741968405a2407687.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。