parent.html页面：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#if{background-color: #e1e1e1;}
</style>
</head>
<body>
<div id="parentDiv">
this id parent div;
</div>
<iframe id="if" width=420 height=330 name=aa frameborder=0 src="child.html"></iframe>
<script type="text/javascript" src="../jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
//用于在parent页面，隐藏iframe内显示的div；
$(document).bind('click', function(){
$(aa.window.document).find('#dd').hide();
})
})
</script>
</body>
</html>
child.html页面：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#dd{
width: 100px;
height: 100px;
border: 1px solid #000;
display: none;
}
</style>
</head>
<body>
<input type="button" value="btn" id="btn">
<div id="dd">
1111111111<br>
1111111111<br>
1111111111<br>
1111111111<br>
1111111111<br>
</div>
<script type="text/javascript" src="../jquery-1.9.1.js"></script>
<script>
$(function(){
$('#btn').bind('click', function(){
$('#dd').show();
//下面代码用于改变parent页面的内容；
$(parent.window.document).find('#parentDiv').html('parentDiv changed by iframe');
})
//用于在iframe内部隐藏div；
$(document).bind('click', function(e){
if(e.target.tagName.id != 'dd' && e.target.tagName.id != 'btn'){
$('#dd').hide();
}
})
})
</script>
</body>
</html>
相关推荐
iframe详细用法iframe详细用法iframe详细用法iframe详细用法iframe详细用法
1. **内容聚合**：网站可以使用iframe展示来自不同来源的内容，如新闻、天气预报或者社交媒体动态。 2. **页面部分更新**：在不刷新整个页面的情况下，通过iframe更新特定区域的信息，提高用户体验。 3. **广告嵌入*...
### FRAME与IFRAME的使用方法与区别 #### 框架的基本概念 在Web开发领域，`FRAME`与`IFRAME`都是用来展示多个文档的容器元素，但它们的工作方式有所不同。`FRAME`是一种早期的技术，它允许开发者在一个HTML页面中...
`iframe`结合`a`标签可以实现一些特殊的跳转效果。例如，我们可以在`iframe`内放置`a`标签，点击后不离开当前页面，而是更改`iframe`的内容。此外，还可以通过`a`标签的`target`属性，指定点击链接时在`iframe`中...
### Iframe的用法详解 Iframe是一种常用的HTML标签，用于在一个HTML页面中嵌入另一个HTML页面或资源，实现“画中画”的效果。本文将详细介绍Iframe的基本属性及其应用场景。 #### 基本语法 Iframe的基本使用格式...
1、使用postMessage方法来完成基座项目和子项目之间的通讯 2、使用position: fixed解决iframe的弹窗及遮罩层问题 3、使用requestFullscreen()解决iframe里的全屏问题 4、使用history解决浏览器的后退问题 5、页面...
下面将详细解释 `iframe` 的使用方法及其相关知识点。 1. **基本结构与属性** - `width`: 定义 `iframe` 的宽度，可以是像素值或百分比。 - `height`: 定义 `iframe` 的高度，同样可以是像素值或百分比。 - `...
下面我们将详细讲解如何使用`iframe`在网页中嵌入其他网页的方法以及相关属性。 首先，`<iframe>` 标签的基本结构如下： ```html <iframe src="目标URL" width="宽度" height="高度" frameborder="边框" margin...
"iframe框架使用(完美版)"这一主题着重讲解了如何高效、灵活地运用iframe，并解决其中的一些常见问题，如自适应高度的设定以及通过JavaScript进行封装。 首先，我们要理解iframe的基本用法。`<iframe>`标签通常包含...
下面我们将深入探讨iframe的用法、优缺点以及一些相关的编程实践。 ### 1. iframe的基本用法 `<iframe>`标签的基本结构如下： ```html <iframe src="http://example.com" width="600" height="400"></iframe> ```...
虽然`iframe`提供了很多便利，但在使用时也需要注意一些问题： 1. **性能影响**：每个`iframe`都相当于加载了一个新的页面，因此过多使用可能会导致页面加载变慢。 2. **跨域限制**：如果`iframe`加载的页面与主...
在Web开发中，`iframe` 是一个非常常用的元素，它允许我们在一个页面中...理解并正确使用上述方法，可以有效地解决跨域限制，实现`iframe`间的通信。在实际项目中，务必确保遵循最佳实践，同时注意安全性和性能影响。
1. **提高加载效率**：通过使用Iframe，可以将一些频繁使用的元素，如广告栏、导航菜单等，加载一次后复用，从而减少用户每次访问时的加载时间。 2. **实现“画中画”效果**：Iframe可以嵌入其他HTML文档，形成“画...
以上就是基于JavaScript的iframe可关闭tab标签组件的实现方法。这个组件可以根据实际需求进行扩展和定制，比如添加动画效果、缓存iframe内容以提高性能等。希望这个教程对你在网页开发中实现类似功能有所帮助。如果...
以下将详细阐述几种DIV被IFRAME遮挡的情况，并提供相应的解决方法。 首先，要了解的是IFRAME是一种HTML元素，它允许在当前HTML文档中嵌入另一个独立的HTML页面。尽管这一特性带来了许多便利，但同时也带来了诸如...
### ASP.NET 中 iframe 的通用用法详解 #### 一、iframe 的基本概念 `<iframe>` 是 HTML 文档中用于嵌入另一个 HTML 文档的标签。它可以用来在当前页面中展示其他网页的内容，或者用于创建复杂的多窗口布局。在 ...
通过以上方法，我们可以确保Panel根据IFrame内容的高度动态调整，避免滚动条的出现或内容被裁剪。在实际应用中，应根据项目需求和兼容性考虑选择最适合的解决方案。同时，确保对IFrame的安全性进行充分考虑，防止跨...
需要注意的是，`document.frames`是老式的方法，用于访问`<frameset>`内的`<frame>`元素，而在现代浏览器中，更推荐使用`contentWindow`或`contentDocument`来访问`<iframe>`的内容。在这个例子中，我们使用了`...
在Web开发中，"父窗口调用iframe子窗口方法"是一个常见的交互场景，尤其是在构建复杂的单页面应用或者需要跨窗口通信时。这篇文章将详细讲解如何实现这个功能，并提供相关的源码示例。 首先，理解基本概念。`iframe...
在介绍JS去除iframe滚动条的方法之前，首先需要理解iframe元素在HTML中的作用。iframe元素代表了一个嵌入的网页，允许在一个HTML页面中嵌入另一个文档，这在多种场景下非常有用，比如页面中嵌入第三方应用的界面等。...