jQuery关闭iframe|极客教程

jQuery关闭iframe

在网页开发中，经常会使用到iframe元素来嵌套其他页面或者内容。但是有时候我们需要在父页面中控制iframe的显示和隐藏，特别是在使用jQuery进行开发时，我们可以利用jQuery来方便地操作iframe元素。

获取iframe元素

在jQuery中要操作iframe元素，首先需要获取到iframe的jQuery对象。我们可以使用选择器来选中iframe元素，并将其封装成jQuery对象。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery关闭iframe示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<iframe src="https://www.example.com" id="myIframe"></iframe>

<script>
 $(document).ready(function() { var iframe =$ ("#myIframe");
    console.log(iframe);
});
</script>

</body>
</html>

在上面的示例中，我们用选择器$("#myIframe")选中了id为myIframe的iframe元素，并将其赋值给变量iframe。然后通过console.log()输出该变量，我们就可以看到iframe的jQuery对象。

关闭iframe

一般情况下，我们可以通过设置iframe元素的display样式来控制其显示和隐藏。将display设置为none即可隐藏iframe，将其设置为block或者其他合适的值则可显示iframe。

下面是一个简单的示例，演示如何使用jQuery关闭iframe：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery关闭iframe示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<iframe src="https://www.example.com" id="myIframe"></iframe>
<button id="closeBtn">关闭iframe</button>

<script>
 $(document).ready(function() {$ ("#closeBtn").click(function() {
        $("#myIframe").hide();
    });
});
</script>

</body>
</html>

在上面的示例中，我们在iframe后面添加了一个按钮，点击按钮时通过jQuery的click()方法绑定了一个事件处理函数，当按钮被点击时，执行$("#myIframe").hide()将iframe隐藏。

完整示例

下面是一个更完整的示例，包含了打开、关闭iframe的功能，并添加了一个重新加载iframe的按钮：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery关闭iframe示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<iframe src="https://www.example.com" id="myIframe"></iframe>
<button id="closeBtn">关闭iframe</button>
<button id="reloadBtn">重新加载iframe</button>

<script>
 $(document).ready(function() {$ ("#closeBtn").click(function() {
         $("#myIframe").hide(); });$ ("#reloadBtn").click(function() {
         $("#myIframe").attr("src",$ ("#myIframe").attr("src"));
    });
});
</script>

</body>
</html>

在这个示例中，我们除了关闭iframe的功能外，还添加了重新加载iframe的功能。当点击重新加载按钮时，我们通过设置iframe的src属性为原有的src属性值来刷新iframe。