重点是这句话window.parent.closeIframe();
因为iframe和它的父页面谁也不知道谁。不能直接找到他的父页面的div，所以用window.parent找到iframe的父页面，然后在用父页面上的js 来关闭包裹iframe的div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$(".close").click(function(){
alert("本页上的close");
$("#win2").hide();
})
})
function closeIframe(){
alert("iframe里的close调用本函数");
$("#win2").hide();
}
</script>
</head>
<body>
<div id="win2" style=" width:300px; height:200px; border:1px solid red;">
<iframe style="height:182px; width:300px;" src="1.html"></iframe>
<a class="close">关闭本页div</a>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function closeParent(){
window.parent.closeIframe();58
}
</script>
</head>
<body>
nihao
<a class="close" onclick="closeParent ()">关系iframe外层的div</a>
</body>
</html>
分享到：
无法实现跨域调用,假设iframe的src="http://www.xxx.com/1.html"的话
相关推荐
比如，用户在`iframe`内点击了一个按钮，可以触发一个事件，然后由`iframe`的父窗口接收到并执行关闭`div`的代码。 4. **消息传递**：对于跨源的`iframe`，可以利用`window.postMessage`方法进行安全的数据通信。`...
最近在做作业中需要在不用iframe的情况下嵌套页面，所以只好在div中嵌套，用的是jquery方法。 复制代码代码如下: [removed] $(document).ready(function() { $(“#button”).click(function() { $(“#content”)....
我们检查当前窗口是否在iframe内，如果是，我们将自定义的div层添加到iframe的body元素中，以确保它覆盖整个页面，而不仅仅是iframe的内容。 现在，你可以像使用原生alert一样使用这个自定义的弹出层： ```...
本教程将详细讲解如何使用JavaScript实现一个可关闭的iframe内嵌tab标签组件。这个组件能够帮助用户在同一个页面中方便地切换和管理多个内容区域，而无需刷新整个页面。 首先，`iframe`是HTML5中的一个元素，它允许...
本主题将详细讲解如何使用JavaScript创建一个可移动的`div`层来模拟`alert`功能，并在`iframe`环境中应用。 首先，让我们了解`alert`的基本用法。`alert`是JavaScript内置的一个全局函数，用于显示一个包含指定消息...
这种技术结合了`iframe`元素和自定义的对话框（dialog）设计，通常由`div`元素构建，并通过JavaScript或者jQuery等库来控制其行为。下面我们将深入探讨`iframe`、`div`以及`dialog`的相关知识点。 **1. iframe...
<div><button onclick="checkHeight()">Check Height</button></div> function checkHeight() { var iframe = document.getElementById("frame_content"); var bHeight = iframe.contentWindow.document.body....
这种技术可以借助`iframe`（Inline Frame）元素来实现。`iframe`允许我们在一个HTML文档中嵌入另一个HTML文档，从而实现页面内容的动态切换，而不会打断用户的操作流程。 **一、iframe的基本使用** `<iframe>`标签...
IFrame通常用于加载外部内容，如网页、视频或地图，也可以用于创建页面内的独立浏览环境。以下是一个简单的IFrame使用示例： ```html <iframe src="https://www.example.com" width="600" height="400"></iframe> `...
当需要调用iframe内的函数时，可以通过`document.getElementById('iframeId').contentWindow`来获取iframe的内容窗口对象，然后在其上执行函数。例如，如果iframe的id为`commentIframe`，且该iframe内定义了一个名...
<input type="button" onClick="printdiv('div_print');" value=" 打印 " /> <div id="div_print">被打印区域：www.jb51.net</h1></div> ``` ```javascript function printdiv(printpage) { var headstr = "<html>...
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> ``` 然后，在主页面中，我们需要加入子页面，并将模态框的div单独写为一个页面。代码如下： ```html <!...
`jquery.magnific-popup.js`是magnific popup插件的核心脚本，它提供了一种优雅的方式来创建各种类型的弹出窗口，包括图像、视频、iframe、纯文本以及自定义的Div模态窗口。这个插件设计得既美观又可定制，可以轻松...
本文将详细讲解如何利用隐蔽的iframe实现这一功能，特别是在ReactJS、AmazeUI和Node.js的环境中。 首先，我们需要理解iframe的工作原理。iframe（Inline Frame）是HTML中的一个元素，它允许在一个页面中嵌入另一个...
本文将深入探讨在`iframe`中生成父窗口元素以及如何在`iframe`内触发父窗口的事件，特别是针对IE和Firefox的差异。 首先，让我们了解`iframe`的基本用法。`iframe`通过`src`属性指定要加载的HTML文档，例如： ```...
UpdatePanel 中不能使用 FileUpload 的弥补方法 - IFrame 方式 在 ASP.NET Ajax 编程中，UpdatePanel 是一个常用的控件，它可以实现局部更新页面的功能。但是，在使用 UpdatePanel 时，我们发现 FileUpload 控件...
本教程主要探讨如何使用JavaScript实现一个可自定义大小、路径并带有动画效果的div弹出层。 首先，我们要理解div在HTML中的角色。div是“division”的缩写，它是一个用于分组HTML元素的容器，可以通过CSS样式进行...
- 确保iframe内的body没有默认的`margin`和`padding`，以免产生不必要的滚动条。 - 使用`onload`事件确保图片完全加载后再进行尺寸调整。 - 测试时，如果iframe中的图片无法正常加载，请检查图片路径是否正确，以及...