Question

我有以下页面编码：

的mypage.html：

    <html><script>var a=document.createElement('p');
    a.innerHTML="hello world";
    document.body.appendChild(a);</script>
    <body>
    <p>testing 1 2 3....</p></body>
   </html>

当我使用具有以下代码的find.html提取信息时。

<script>
window.onload =finder();
function finder(){
var iframe=document.createElement('iframe');
iframe.width=1;
iframe.height=1;
iframe.src='mypage.html';
iframe.setAttribute('id', 'iframer');
document.body.appendChild(iframe);
    setTimeout(
        function() { 
var e = document.getElementById("iframer");
var frameHTML = e.contentDocument; var serializer = new XMLSerializer(); var content = serializer.serializeToString(frameHTML); alert(content);
        } , 30000);
}
</script>

最终结果显示为警告弹出窗口：

    <html><script>var a=document.createElement('p');
    a.innerHTML="hello world";
    document.body.appendChild(a);</script>
    <body>
    <p>testing 1 2 3....</p></body>
   </html>

这不是我想要的。我希望得到的内容如下所示已在浏览器中呈现，我需要获取所有渲染和生成的动态源代码仅供检查，我如何编码以获取呈现的HTML源代码：

   <body>
   <p>hello world</p>
   <p>testing 1 2 3....</p>
   </body>

Answer 1

为IFrame提供id属性。

contentDocument对象实际上因不同的浏览器而异。此外，出于安全原因，您只能在同一个域中获取IFrame的内容。

var IFrame_DOM;
var iframe = document.getElementById('iframer'); // The ID of the IFrame
if (iframe.contentDocument)
{
  IFrame_DOM = iframe.contentDocument; // Get DOM in Chrome / Gecko
}
else if (iframe.contentWindow)
{
  IFrame_DOM = iframe.contentWindow.document; // Internet Explorer
}
if (IFrame_DOM)
{
  // Successfully got the DOM
  // Use the DOM in code here
}
else
{
  alert('Unsupported Browser. Couldn\'t read DOM.');
}

Answer 2

为什么你不使用像这样的xml序列化器：

var serializer = new XMLSerializer();
var content = serializer.serializeToString('yourIframeObject;);

内容变量包含iframe内容，包括<!DOCTYPE html>，<HTML>和<head>

如何查找Iframe页面的渲染内容？

2 个答案: