Javscript调用iframe框架页面中函数的方法

2023年5月27日上午11:22 • JavaScript

当一个网页中包含有一个或多个iframe时，如果我们想要在外部JS文件中调用这个iframe中的函数，我们可以通过以下两种方法来实现。

方法一：使用window.frames[index].functionName()

使用window.frames可以获取网页中所有的iframe，它返回的是一个加了编号的数组，每个数组元素代表一个iframe，编号从0开始。在获取到iframe之后，我们可以通过在它后面加上其内部元素的id或名称来获取到对应的元素，再使用.调用函数。

//获取第一个iframe中的元素，并调用该元素中的函数
window.frames[0].document.getElementById("elementId").functionName();

方法二：在iframe框架内定义window.parent

在iframe框架内，我们可以使用父页面的window.parent方法获取到父页面中的全局对象，从而就可以在父页面中调用到iframe中定义的函数。

示例一：调用从属于父页面window对象中的函数

<!-- 父页面 index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>主页</title>
</head>
<body>
    <iframe src="./iframe.html" id="iframe1" width="100%" height="480" frameborder="0">
    </iframe>    
    <script type="text/javascript">
        function sayHello() {
            alert('hello');
        }
    </script>
</body>
</html>

<!-- 子页面 iframe.html -->
<!DOCTYPE html>
<html>
<head>
    <title>iframe 页面</title>
</head>
<body>
    <button onclick="doParent()">点击弹窗</button>
    <script type="text/javascript">
        //从属于父页面window对象中的函数
        function doParent() {
            window.parent.sayHello();   
        }
    </script>
</body>
</html>

在这里，我们在子页面iframe.html里定义了一个函数doParent()，当我们在iframe中点击按钮时，它会执行函数并通过window.parent方法获取到父页面的全局对象window。然后，我们可以调用父页面中定义的函数，最终成功弹出窗口。

示例二：调用从属于iframe框架页面中的函数

<!-- 父页面 index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>主页</title>
</head>
<body>
    <iframe src="./iframe.html" id="iframe1" width="100%" height="480" frameborder="0">
    </iframe>    
</body>
</html>

<!-- 子页面 iframe.html -->
<!DOCTYPE html>
<html>
<head>
    <title>iframe 页面</title>
</head>
<body>
    <button onclick="sayHello()">点击弹窗</button>
    <script type="text/javascript">
        //从属于 iframe 页面中的函数
        function sayHello() {
            alert('hello');
        }
    </script>
</body>
</html>

在这里，我们相当于直接在iframe.html中，定义了一个函数而没有定义在父页面上，也就是说我们可以直接调用当前iframe网页中的函数。

最后，需要注意一下，使用iframe调用函数和调用普通的函数是有一些差别的，主页面中的JS代码操作在父页面执行，而iframe中自己的JS代码操作需要在子页面中执行。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javscript调用iframe框架页面中函数的方法 - Python技术站