Call iframe function in parent window

Question

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

score 3 · Answer 1 · edited May 23 '17 at 12:08

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

edited May 23 '17 at 12:08

Community

1
1

answered May 02 '13 at 11:32

radha krishna

230
1
4

score 1 · Answer 2 · answered May 02 '13 at 11:29

1

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

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

answered May 02 '13 at 11:29

thebreiflabb

1,504
10
19

score 1 · Answer 3 · answered Sep 30 '15 at 09:56

Would suggest this https://developer.mozilla.org/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.com/');

And then in the 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.)

score 0 · Answer 4 · answered Nov 10 '20 at 04:55

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 compare 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.

Call iframe function in parent window

4 Answers4

Way 1

Way 2

Way 3