[JS]js來取iframe框架中的內容原始碼參考
阿新 • • 發佈：2019-02-03
Iframe是一個內嵌框架，它允許你任意的載入HTML檔案到你現在的document裡面，你能夠通過“src”屬性來動態的載入檔案。那麼假如你要通過javascript獲取Iframe框架裡面的內容並且處理它。那麼這裡有一個例子可以幫助如何去做。並且這些例子通過了FireFox瀏覽器和IE的相容。先載入一個簡單的Html檔案到iframe中來看看效果。然後通過javascript中的getIframeContent方法來獲取檔案的內容。
GetIframeDetails.html
- <html>
- <body>
- <iframeid="testFrame"src="FrameContent.html">
- </iframe>
- <ahref="#"onclick="getIframeContent('testFrame');">Get the content of Iframe</a>
- </body>
- <script>
- function getIframeContent(frameId){
- var frameObj = document.getElementById(frameId);
- var frameContent = frameObj.contentWindow.document.body.innerHTML;
- alert("frame content : "+frameContent);
- }
- </script>
- </html>
FrameContent.html
- <html><body>
- <divid="testFrameContent"style="border:1px;">
- This is simple HTML file which is loaded inside the iframe.
- </div>
- </body>
- </html>
通過 getIframeContent方法怎麼做？
- function getIframeContent(frameId){
- var frameObj= document.getElementById(frameId);
- var frameContent = frameObj.contentWindow.document.body.innerHTML;
- alert("frame content : "+frameContent);
- }
- getElementById(frameId) – 獲取所引用的iframe物件
- contentWindow – 它是一個屬性，返回的是指定的frame或者iframe所在的window物件
- contentWindow.document – 返回的是所指定的iframe文件物件
- contentWindow.document.body.innerHTML –返回的是iframe中body部分的html
你可以獲取iframe裡面任意的標籤元素。也可以通過標籤的name/id來處理。讓我們假設一個使用場景：假如我們要獲取iframe裡面的，div的內容。那麼我們可以通過下面這條語句來檢索它
- frameObj.contentWindow.document.getElementById(“testFrameContent”).innerHTML