码迷,mamicode.com
首页 > Web开发 > 详细

使用JS/JQ获取iframe里面的元素

时间:2020-01-18 21:12:38      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:||   java   asc   方法   ant   image   在服务器   scroll   ima   

首先实现父级通过iframe访问子级DOM元素有以下几点需要特别注意的
1,需要在服务器的情况下访问,可以使用本地服务器
2,需要使用入口函数(当初被这个坑惨了)
3,这种方法跨域访问不了
>*使用本地服务器
技术图片

首先建立两个文件分别命名为父级parantN.html和子级Child.html两个html文件,先看看html文件代码。

父级parantN.html

  <iframe id='myIframe' name="myIrame" src="Child.html" 
    scrolling="no" border="0" frameborder="no" framespacing="0"
    allowfullscreen="true">
  </iframe>
</body>

子级Child.html

  <div id="qq">
    <div>
      <div id="text">我是子级</div>
    </div>
    </duiv>

使用JS代码获取iframe里面的元素

  // 使用JavaScript方法获取
  // 例子:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID")
  window.onload = function () {
    var text = window.frames["myIrame"].document.getElementById("text")
    text.style.color = 'red';
    text.innerHTML = '看我使用JavaScript方法获取了iframe里面的元素,并修改了。';
  }

技术图片

||||||||
使用JQ获取iframe里面的元素

  //例子: $("#iframe的ID").contents().find("#iframe中的控件ID")
  window.onload = function () {
    $("#myIframe").contents().find("#text").html('使用JQ改变了iframe里面的内容').css({
      'color': 'red'
    })
  }

技术图片

使用JS/JQ获取iframe里面的元素

标签:||   java   asc   方法   ant   image   在服务器   scroll   ima   

原文地址:https://www.cnblogs.com/yohe/p/12210112.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!