0

I need to call a function which is in iFrame from developer console. But I'm unable to do that.

I tried the following and I get a error that its not a function.

document.getElementById('firstWindow').contentWindow.document.myFunction()

window.frame["firstWindow"].myFunction()

The scritp is inside document.getElementById('firstWindow').contentWindow.document. But how do I call it?

enter image description here

Here is how the code looks like:

<html>
<body>
    <--- Content from iFrame -->
    <iframe id="firstWindow" name="firstWindow" src="/test">
    <html>
    <head>

        <script>
              myFunction(){
                  console.log('test');
              };
        </script>

    </head>
    <body>
        some text
    </body>
    </html>
    </iframe>

</body>
</html>
user630702
  • 2,529
  • 5
  • 35
  • 98

1 Answers1

0

There are several ways to call the iframe function.

Way 1

In your case, you can use document.getElementById("firstWindow").contentWindow.myFunction() 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].myFunction()
    }
}

Way 3

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

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

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

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

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

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

Jack Yu
  • 2,190
  • 1
  • 8
  • 14
  • Both first and second method doesn't work in my case. I'm not sure why. I get the error myFunction is not function – user630702 Nov 07 '20 at 12:34
  • You can't write html body tag in your . iframe depend the "src", so you need to write code in "/test" html. In first html, you only have this ``. BUT, in "/test" this html, you need to write the code `` – Jack Yu Nov 07 '20 at 12:39
  • Oh that's how it is.. My bad I'll edit the post. The body and head tags are part of the iframe file. I just copied and pasted from page-source. – user630702 Nov 07 '20 at 12:41
  • Maybe you can try it in chrome console after the page are all loaded. I think you might early call iframe function which iframe is already not loaded. Or just add setTimeout(()=>{}, 1000), 1 second to try it. – Jack Yu Nov 07 '20 at 12:44
  • Maybe you forget to add `function` keyword in front of you myFunction? – Jack Yu Nov 07 '20 at 12:48