如何在 JavaScript 中获取 iframe 的主体内容?
javascriptobject oriented programmingfront end technology
我们使用 getIframeContent(frameId) 来获取 JavaScript 中 iframe 的对象引用。
要获取 iframe 中的元素，首先我们需要使用 document.getElementById() 方法通过将 iframe id 作为参数传递来访问 JavaScript 中的 <iframe> 元素。
使用 iframetag
HTML 中的 <iframe> 标签指定内联框架。此内联框架用于在当前 HTML 文档中嵌入另一个文档。
每个浏览器都支持 <iframe> 元素，例如(Google Chrome、Microsoft edge/internet explorer、Firefox、safari 和 opera)。
我们在 <iframe> 中使用 srcdoc 属性标签指定在 <iframe> 中显示的页面 HTML 内容。
属性 srcdoc 将以 HTML_code 为值，指定在 <iframe> 中显示的页面 HTML 内容。
以下是我们使用 <iframe> 标签和 srcdoc 属性在 HTML 中指定在 <iframe> 中显示的页面 HTML 内容的示例。
现在让我们逐一查看这些示例。
示例
以下是使用 iframe 创建窗口的示例程序。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <iframe id = "myId" name = " myId ">...</iframe> <script> var myDoc; if (window.frames && window.frames. myId && (myDoc = window.frames. myId.document)) { var iframeBody = myDoc.body; var content = iframeBody.innerHTML; } </script> </body> </html>
示例
以下是在 iframe 创建的窗口中放置内容的示例程序。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> How to get HTML content of an iFrame using javascript? </title> </head> <body> <iframe id="frameID" src="Untitled-2.html"> </iframe> <a href="#" onclick= "getIframeContent('frameID');"> Get content of Iframe </a> <script> function getIframeContent(frameID) { var frameObj = document.getElementById(frameID); var frameContent = frameObj.contentWindow.document.body.innerHTML; alert("frame content : " + frameContent); } </script> </body> </html>
Undefined.html
<!DOCTYPE html> <html> <body> got the body's content of an iframe in JavaScript </body> </html>
点击获取内容后，弹出窗口将显示 iframe 的内容。
