首頁 > 開發者 > JavaScript

JS跨域訪問操作iframe裡的dom

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
文章目錄
  • 三、重寫iframe裡的內容

文章轉自:http://www.kuqin.com/webpagedesign/20081109/26336.html

 

很多人一直都有個想法，要是可以隨心所欲的操作iframe就好了。這樣靜態頁面也就有了相當於後台動態網頁面php,jsp,asp中include，require實現統一多頁面配置的能力。

通過Javascript的幫忙我們可以像後台一樣動態載入操作iframe對象屬性src指向的html頁面的內容。這樣的操作需要提供兩個頁面，一個頁面是iframe所在頁面(頁面名稱：iPage.html)，另一個頁面是iframe屬性src指向頁面（頁面名稱：srcPage.html）。

iPage.html，<body>裡dom：

  1. <iframe id=“iId“ name=“iName“ src=“srcPage.html“ scrolling=“no“ frameborder=“0“></iframe>

srcPage.html，<body>裡dom：

  1. <h1>妹妹的一天</h1> 
  2. <p>早上吃早點，中午約會吃飯，下午K歌，晚上和哥哥瞎折騰</p>

下面討論ie下JS是怎麼操作以上兩個頁面，再討論firefox的做法，最後給出相容ie,firefox瀏覽器操作iframe對象的方法。

一、ie下訪問操作iframe裡內容

大家都知道iframe是非標準html標籤，它是由ie瀏覽器推出的多布局標籤, 隨後Mozilla也支援了這個標籤。(閑話，嘿嘿)

1. ie通過document.frames["IframeName"]擷取它，例子：我們在iPage.html裡輸出srcPage.html裡h1的內容，JS如下：

  1. alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);

你會發現這樣在頁面裡加入代碼，好像並沒有輸出想要的東東，為什麼呢？這個我也沒有搞清楚，只是習慣性的加入了window.onload就有輸出了（註：JS代碼都寫到這個事件裡去），知道的人士可否告訴我下。why?更改之後代碼ie下有了輸出，firefox下document.frames沒有定義錯誤提示：

  1. window.onload = (function () { 
  2.   alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
  3. });

2. ie另一種方法contentWindow擷取它，代碼：

  1. window.onload = (function () { 
  2.  var iObj = document.getElementById(‘iId‘).contentWindow;
  3.  alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
  4. });

此方法經過ie6,ie7,firefox2.0,firefox3.0測試都通過，好事啊！嘿嘿。（網上一查，發現Mozilla Firefox iframe.contentWindow.focus緩衝區溢位漏洞，有指令碼插入式攻擊的危險。

後來聽說可以在後台防止這樣的事情發生，算是鬆了口氣。不過還是希望firefox新版本可以解決這樣的危險。）

3.改變srcPage.html裡h1標題內容，代碼：

  1. iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想變成她一天的一部分‘;

通過contentWindow後訪問裡面的節點就和以前一樣了。

二、firefox下訪問操作iframe裡內容

Mozilla支援通過IFrameElmRef.contentDocument訪問iframe的document對象的W3C標準，通過標準可以少寫一個document,代碼：

  1. var iObj = document.getElementById(‘iId‘).contentDocument;
  2. alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想變成她一天的一部分‘);
  3. alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);

相容這兩種瀏覽器的方法，現在也出來了，就是使用contentWindow這個方法。

嘿嘿！操作iframe是不是可以隨心所欲了呢？如果還覺得不爽，你甚至可以重寫iframe裡的內容。

三、重寫iframe裡的內容

通過designMode（設定文檔為可編輯設計模式）和contentEditable（設定內容為可編輯），你可以重寫iframe裡的內容。代碼：

  1. var iObj = document.getElementById(‘iId‘).contentWindow;
  2. iObj.document.designMode = ‘On‘;
  3. iObj.document.contentEditable = true;
  4. iObj.document.open();
  5. iObj.document.writeln(‘<html><head>‘);
  6. iObj.document.writeln(‘<style>body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>‘);
  7. iObj.document.writeln(‘</head><body></body></html>‘);
  8. iObj.document.close();

這兩個對象的資料可參考：http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx

firebug測試以上代碼效能,

注釋掉 iObj.document.designMode = ‘On’;

iObj.document.contentEditable = true;


效果沒有變，時間效率是注釋前的將近三倍。嘿嘿。那兩個對象是參考網路一些人的寫法，重寫iframe裡內容，其實沒有必要用designMode和contentEditable，除非有其他的需求。

四、iframe自適應高度

有了上面的原理要實現這個相當簡單，就是把iframe的height值設定成它裡面文檔的height值就可以。代碼：

  1. window.onload = (function () { 
  2. var iObj = document.getElementById(‘iId‘);
  3. iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;
  4. });

現在對JS操作iframe你已經有了全新的認識，說不定那天會因為這個有什麼新的web技術名詞，嘿嘿，臭美下！

參考資料：

https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla

http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx

http://www.kuqin.com/webpagedesign/20080516/8536.html《再談iframe自適應高度》

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html

 

PS:

在"一、ie下訪問操作iframe裡內容" 裡面LZ提了這樣一個疑問" 你會發現這樣在頁面裡加入代碼，好像並沒有輸出想要的東東，為什麼呢？這個我也沒有搞清楚，只是習慣性的加入了window.onload就有輸出了（註：JS代碼都寫到這個事件裡去），知道的人士可否告訴我下。"

大膽猜測,可能LZ在文檔內容完全載入之前就試著輸出h1，因此出錯,而加了 window.onload...後, js代碼在文檔完全載入後才執行,錯誤就解決了....由於本人視力一般,在該頁面搜尋了很久也沒發現回複按鈕,只能將想法貼在這裡,未經證實,歡迎指教...

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
iframe host squarespace iframe dom iframe audio loop php iframe example iframe php page php iframe code
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More