关于iframe的使用

来源：互联网发布：linux jenkins部署编辑：程序博客网时间：2024/06/08 09:43

1.父页面调用iframe中元素，并获取值
div =$(“iframe的id”).contents().find(“需要元素的id”);例：

div = $("#bigpic").contents().find("#jizhan");//获取iframe中的id为jizhan的div

2.父页面调用iframe中的js方法
bigpic为iframe的name名；moveLP()为iframe中的js方法名，例：

bigpic.window.moveLP();//调用iframe中的js 方法

父页面

<div id="div">div element</div><iframe id="iframe" src="page.html" frameborder="0"></iframe><script src="http://code.jquery.com/jquery-latest.min.js"></script><script>$(function ($) {    //在页面中查找 iframe 页面元素    var p = $('#iframe').contents().find('#p').text();    alert(p);});//自定义变量var hello = 'hello';//自定义方法function getHelloWorld() {    alert('hello world');}</script>

子页面

<p id="p">p element</p><script src="http://code.jquery.com/jquery-latest.min.js"></script><script>$(function ($) {    //在 iframe 中查找父页面元素    alert($('#div', parent.document).text());    //在 iframe 中调用父页面中定义的方法    parent.getHelloWorld();    //在 iframe 中调用父页面中定义的变量    alert(parent.hello);});</script>

3.在iframe中调用父页面的内容：
3.1.在 iframe 中查找父页面元素，#div为某个标签内的id值

 alert($('#div', parent.document).text());

3.2.在 iframe 中调用父页面中定义的方法

 parent.getHelloWorld();

3.3.在 iframe 中调用父页面中定义的变量

 alert(parent.hello);

当一个页面包含两个iframe时

父页面：

<body>       <div id="drawing" style="width:70%;height: 65%;overflow: hidden;float: left;border: 1px solid black;"><iframe name="bigpic" id="bigpic" frameborder="0" src="appUserContrail/orbit1" style="margin:0 auto;padding:0;" width="100%" height="700" scrolling="no"></iframe></div> <div id="drawing" style="width:28.5%;height: 65%;overflow: hidden;float: left;border: 1px solid black;"><iframe name="table" id="table" frameborder="0" src="appUserContrail/queryAppUserContrail" style="margin:0 auto;padding:0;" width="100%" height="700" scrolling="no"></iframe></div></body>

名叫bigpic的iframe页面：

<div id="main"> <div id="div2"> <div class="dragAble" id="block1" onMouseOver="dragObj=block1; drag=1;" style="z-index: 10;  left: 0px;  position: absolute; top: 0px; " onMouseOut=""drag="0">  <div id='lm_test'  style="zoom: 1.5;z-index: 100000;width: 100%;height: 100%" >  <img  src="static/img/userContrail/buildground.png" border="0" name="images1"><!-- 显示的大图片 -->   <div id='move-person' style="position:absolute;width: 20px;height:4%;z-index:z-index: 1000;left:10%;top:12%;display: none;">   <img src="static/img/userContrail/blueCap.png" style="width: 100%;height: 100%;"><!-- 显示轨迹的小人图标 -->   </div> </div> </div> </div></div>

名叫table的iframe页面现在想要获得bigpic的iframe框架中的id=’lm_test’的div标签的语句是：
名叫table的iframe页面现在想要获得bigpic的iframe框架中的id=’move-person’的div标签的语句是：

1.parent.bigpic.window.document.getElementById('lm_test');或parent.bigpic.$('lm_test');2.var Move=parent.bigpic.$('#move-person');

这两个语句总有一个可以生效可以试试看

阅读全文

0 0