JavaScript：从开发者控制台调用 iFrame 函数

Question

I need to call a function which is in iFrame from developer console.我需要从开发人员控制台调用 iFrame 中的函数。 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 .脚本位于document.getElementById('firstWindow').contentWindow.document 。 But how do I call it?但是我怎么称呼它呢？

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>

Answer 1

There are several ways to call the iframe function.有几种方法可以调用 iframe 函数。

Way 1方式一

In your case, you can use document.getElementById("firstWindow").contentWindow.myFunction() to trigger.在您的情况下，您可以使用document.getElementById("firstWindow").contentWindow.myFunction()来触发。

Way 2方式二

Use window.frames .使用window.frames 。
window.frames is an array, you can set the iframe name with window.name="this is iframe test" in "test.html" window.frames是一个数组，您可以在“test.html”中使用window.name="this is iframe test"设置 iframe 名称
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.使用 postMessage。
In the way1 and way2, you need to assign function in the window object.在way1和way2中，需要在window对象中赋值。

<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.在 Way3 中，您可以隐藏 myFunction，然后您也可以触发它。
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() .然后在 a.html 中，您可以尝试使用 way1 或 way2，例如document.getElementById("firstWindow").contentWindow.myFunction() 。
myFunction will not be called becuase the scope problem.由于范围问题，不会调用myFunction 。

JavaScript：从开发者控制台调用 iFrame 函数

问题描述

1 个解决方案

解决方案1
0 2020-11-07 12:30:37

Way 1方式一

Way 2方式二

Way 3方式三

JavaScript：从开发者控制台调用 iFrame 函数

问题描述

1 个解决方案

解决方案1 0 2020-11-07 12:30:37

Way 1方式一

Way 2方式二

Way 3方式三

解决方案1
0 2020-11-07 12:30:37