jquery 父级调用iframe方法

原创

mob64ca12e1c36d 2024-06-18 03:42:34 ©著作权

文章标签 jQuery html 当前页 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e1c36d的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery父级调用iframe方法

在网页开发中，我们经常会遇到需要在iframe中加载其他页面的情况。但是有时候，我们希望父级页面能够调用iframe中的方法，以实现页面间的信息交互。在这种情况下，我们可以使用jQuery来实现父级调用iframe方法的功能。

iframe基础知识

首先，让我们来了解一下iframe的基础知识。iframe是HTML中的一个标签，用于在当前页面中嵌入另一个页面。通过iframe，我们可以在当前页面中显示其他网页的内容，实现页面的嵌套和分离。

<iframe id="myFrame" src="child.html"></iframe>

上面的代码片段展示了一个简单的iframe标签，其中指定了iframe的id和src属性，src属性指向的页面将会在当前页面中被加载显示。

父级调用iframe方法

接下来，让我们看看如何使用jQuery来实现父级页面调用iframe中的方法。首先，我们需要在iframe中定义一个方法供父级调用。

<iframe id="myFrame" src="child.html"></iframe>
<script>
    function childMethod() {
        alert("This is a method in child.html");
    }
</script>

在iframe中定义了一个名为childMethod的方法。现在我们可以在父级页面中使用jQuery来调用这个方法。

$("#myFrame")[0].contentWindow.childMethod();

上面的代码片段中，我们使用jQuery选择器选中了id为myFrame的iframe元素，然后通过contentWindow属性访问到iframe中的window对象，最后调用了在iframe中定义的childMethod方法。

示例

下面我们来看一个完整的示例，在示例中，父级页面中有一个按钮，点击按钮后会调用iframe中的方法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Page</title>
<script src="
</head>
<body>
<iframe id="myFrame" src="child.html"></iframe>
<button id="btn">Call Child Method</button>
<script>
$(document).ready(function() {
    $("#btn").click(function() {
        $("#myFrame")[0].contentWindow.childMethod();
    });
});
</script>
</body>
</html>

在上面的示例中，点击按钮后会调用iframe中的childMethod方法，弹出一个提示框。