zoukankan      html  css  js  c++  java
  • 使用JS/JQ获取iframe里面的元素

    首先实现父级通过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>
        </div>
    

    使用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'
        })
      }
    

    君子慎独,修己以安人
  • 相关阅读:
    常见Dos命令
    常用快捷键小技巧
    springboot集成JPA返回Json报错 com.fasterxml.jackson.data
    docker安装mysql 8.0.20 版本 超详细教程
    8.24 Java自学
    8.23 Java自学
    8.22 Java自学
    8.21 Java自学
    8.20 Java自学
    8.19 Java自学
  • 原文地址:https://www.cnblogs.com/yohe/p/12210112.html
Copyright © 2011-2022 走看看