利用iframe引用网页后,父页面子页面之间的相互调用
2016-12-08 22:21
483 查看
大家仔细看一下代码,可以copy下来自己试验一下,建议大家自己试一下,很快就会了。
//父页面内容
//子页面
//父页面内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级页面</title> <style> * { margin: 0; padding: 0; } div { margin: 0 auto; max-width: 800px; /*height: 500px;*/ background-color: salmon; } div span { font-size: 20px; color: black; font-weight: 900; } </style> </head> <body> <div> <span id="fufu">这是父页面</span> <iframe id="zizi" src="zi.html" frameborder="0" scrolling="no"></iframe> </div> <script src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> //父页面调用子页面的元素 $(function(){ $("#zizi").load(function(){ $("#zizi").contents().find("#one").css({backgroundColor:"white",color:"red"}); }); }); </script> </body> </html>
//子页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子级页面</title> <style> * { margin: 0; padding: 0; } div { width: 500px; height: 500px; /*margin: 50px auto;*/ background-color:rebeccapurple; } </style> </head> <body> <div id="one"> 这是子页面。 </div> <script src="jquery-1.11.3.min.js"></script> <script> //子页面调用父页面的元素 ~function(){ var fufu = window.parent.document.getElementById('fufu'); $(fufu).css({color:'white'}); }() </script> </body> </html>
相关文章推荐
- iframe 父页面与子页面之间的方法、属性的相互调用
- [Html&JS] 一个网页上,不同的子父窗口iframe之间如何相互调用
- Iframe父页面与子页面之间的相互调用
- iframe 父页面与子页面之间的方法的相互调用【转】
- Iframe父页面与子页面之间的相互调用
- iframe 父页面与子页面之间的方法的相互调用
- iframe 父页面与子页面之间的方法的相互调用
- iframe 父页面与子页面之间的方法的相互调用
- iframe父子页面之间相互调用元素和函数
- iframe 父页面与子页面之间的方法的相互调用
- 关于Iframe父页面与子页面之间的相互调用
- iframe 父页面与子页面之间的方法的相互调用
- Android加载网页JavaScript与Java之间的相互调用
- 【同域】根据iframe中引用的网页的高度来修改父级页面的iframe高度-iframe自适应子页高度
- 父页面和iframe页面之间方法的互相调用
- 【原创】iframe与父页面之间,变量、方法互相调用
- iframe父子页面相互调用js方法
- iframe的父子窗口之间的对象相互调用基本用法
- iframe父子页面相互调用的js方法(二)
- iframe的父子窗口之间的对象相互调用基本用法