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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章