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详细用法
有关iframe的用法,以及要用的图标 有关iframe的用法,以及要用的图标
FRAME与IFRAME的使用方法与区别 两者是如何区分如何工作的
IFrame用法 IFrame可以在网页内嵌入另一个页面,类似“画中画”形式。 标记的使用格式是: <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> src:...
iframe的2种用法 指定页面的嵌套 动态指定页面的嵌套
Iframe用法精析 <iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-ad.htm"></iframe> <IFRAME>用于设置文本或图形的浮动图文框或容器。 BORDER ...
IFrame用法 IFrame用法
所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的实际案例,我才明白具体如何使用iframe进行...
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
主要介绍了使用iframe在网页中嵌入其他网页的方法,需要的朋友可以参考下
就想弄一个winform结合html5的一个小东西,突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧
frame,iframe,frameset用法和区别
ASP.NET iframe 的通用用法 忘记了的同学可以下载看下
非常好用的一款js集成的iframe,tab标签的使用,如果对各位有用的话,请回来给个好评,谢谢!
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
它详细的描述了ifreme的各个用法,是学习asp.ent框架(ifrmae)的好资料
可以左右拖动的iframe框架,简单,比较好用
IFrame组件,用于在flex页面中嵌入其他html,jsp等等页面!
NULL 博文链接:https://hqlly.iteye.com/blog/1662337
例子 博文链接:https://hibernater.iteye.com/blog/220461