Use JS / JQ get inside the iframe element

First realized by the parent access to the child iframe DOM elements following points need special attention
1, in case of need to access the server, you can use a local server
2, need to use the entry function (this had been a miserable pit)
3, which Cross-domain methods can not access
> * use a local server

First, create two files are named parantN.html a parent and child Child.html two html files, html files take a look at the code.

Parent parantN.html

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

Child Child.html

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

Use JS code acquired inside the iframe element

  // 使用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里面的元素,并修改了。';
  }

||||||||
use JQ get inside the iframe element

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

Guess you like

Origin www.cnblogs.com/yohe/p/12210112.html