关于iframe的使用

最新推荐文章于 2025-03-14 16:54:39 发布

LinRuoZhuo

最新推荐文章于 2025-03-14 16:54:39 发布

阅读量418

点赞数

分类专栏：代码总结文章标签： javascript iframe

本文链接：https://blog.youkuaiyun.com/LinRuoZhuo/article/details/76264110

版权

代码总结专栏收录该内容

22 篇文章

订阅专栏

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');

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