JavaScript获取完整HTML

页面中包含Iframe，不排除多层嵌套包含。期望得到完整HTML树，结构如下：<html>
    
    <head>
    ...
    </head>
    
    <body>
        <iframe>
        
            <html>
                <head>
                ...
                </head>
                
                <body>
                    <iframe>
                        ...
                    </iframe>
                </body>
            </html>
            
        </iframe>
        
        </iframe>...</iframe>
        
    </body>
    
</html>左右搞搞一天没搞出个好方案，需要兼容Firefox与IE。IE内里元素的attributes把我搞晕了，每个元素一迭代一百多个多项目

解决方案 »

  1.   

    document.OuterHTML不行吗？然后递归查找里面的iframe
      

  2.   

    jq的 $("div").html();不行吗？ 
      

  3.   

    Iframe 的内嵌页与父页面是一个域名下滴么？否则无法访问滴
      

  4.   


    估计我没描述清晰，关键是必须使用JavaScript读取当前页面，请勿跑题。
      

  5.   


    跨域用首次HTTP请求代理，注意是首次。跨域等问题 不在本论题之内。
      

  6.   


    window.onload = function(){
       alert(document.getElementsByTagName("html")[0].innerHTML);
    }
      

  7.   

    恩，同域就好，应该是递归遍历 iframe 嵌套树的过程，ie 下可以通过访问 document.frames 实现，
    而 FF 似乎不行，不知是否能找到与 document.frames 对应的集合？！IE 应该没问题，代码明早上班就写，回家吃饭先，88
      

  8.   

    恩，同域就好，应该是递归遍历 iframe 嵌套树的过程，ie 下可以通过访问 document.frames 实现， 
    而 FF 似乎不行
      

  9.   

    对于iframe，笨一点的方法，搜索字符串，找到iframe.src，通过js取，然后插到对应的位置
      

  10.   

    呵呵,圆环套圆环,每个iframe都逐级传递innerHTML
      

  11.   

    办法实际上有，我觉得那方法太傻了。今晚我开始实现元素级树递归，iframe我不会用字符串替换，觉得不可靠。真不知道IE有没有其他方法获取属性，Firefox获取的属性很干净，IE获取出来130+属性，这设计让我拜服。
      

  12.   

    iframe要是嵌套5层，估计循环就得让浏览器死掉！！！
      

  13.   

    其实嵌套三层已经是我特意极限模拟了，这时代还有谁这么滥用iframe，一个iframe就占用一个WebServer的线程资源。AJAX如此泛滥，iframe特定场合才会出现。
      

  14.   

    IE 下已实现，一共三个页面，p1, p2, p3，嵌套关系如下：
    p1
      p2
        p3
      p3
    即 p1 里嵌入了 p2、p3，p2 里嵌入了 p3。代码如下：L@[email protected]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
    <h1>页面 1 包含 页面 2</h1>
    <iframe id="iframe12" frameborder=0 scrolling=no src="p2.html"></iframe> <h1>页面 1 包含 页面 3</h1>
    <iframe id="iframe13" frameborder=0 scrolling=no src="p3.html"></iframe>
    <script type="text/javascript" defer>
    <!--
    function getFullHTML(doc)
    {
    var fullHTML;
    var aIframeHTML = new Array(); for (var i=0; i<doc.frames.length; i++)
    {
    aIframeHTML.push(getFullHTML(doc.frames[i].document));
    } fullHTML = doc.documentElement.outerHTML; if(aIframeHTML.length > 0)
    {
    var regIframe = /<\/iframe>/gi;
    var ind = 0;
    fullHTML = fullHTML.replace(regIframe, function($0) {
    return aIframeHTML[ind++] + $0 + "\n\n";
    });
    } return fullHTML;
    }alert(getFullHTML(document));
    //-->
    </script>
     </body>
    </html>
    p2.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
       <h2>页面 2 包含 页面 3</h2>
    <iframe id=iframe23 frameborder=0 scrolling=no src="p3.html"></iframe>
     </body>
    </html>
    p3.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
      <h3>页面 3 被页面 2 包含！</h3>
     </body>
    </html>
      

  15.   

    为方便输出，改用 textarea，将 p1 代码适当调整如下：p1.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
    <h1>页面 1 包含 页面 2</h1>
    <iframe id="iframe12" frameborder=0 scrolling=no src="p2.html"></iframe> <h1>页面 1 包含 页面 3</h1>
    <iframe id="iframe13" frameborder=0 scrolling=no src="p3.html"></iframe>
    <br />
    <textarea id="ttaOutput" rows="20" cols="60"></textarea> <script type="text/javascript" defer>
    <!--
    function getFullHTML(doc)
    {
    var fullHTML;
    var aIframeHTML = new Array(); for (var i=0; i<doc.frames.length; i++)
    {
    aIframeHTML.push(getFullHTML(doc.frames[i].document));
    } fullHTML = doc.documentElement.outerHTML; if(aIframeHTML.length > 0)
    {
    var regIframe = /<\/iframe>/gi;
    var ind = 0;
    fullHTML = fullHTML.replace(regIframe, function($0) {
    return aIframeHTML[ind++] + $0 + "\n\n";
    });
    } return fullHTML;
    }document.getElementById("ttaOutput").value = getFullHTML(document);
    //-->
    </script>
     </body>
    </html>
    最终输出代码如下：<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE>
    <META content=editplus name=generator>
    <META content="" name=author>
    <META content="" name=keywords>
    <META content="" name=description></HEAD>
    <BODY>
    <H1>页面 1 包含 页面 2</H1>
    <IFRAME id=iframe12 src="p2.html" frameBorder=0 scrolling=no>
        <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE>
        <META content=editplus name=generator>
        <META content="" name=author>
        <META content="" name=keywords>
        <META content="" name=description></HEAD>
        <BODY>
        <H2>页面 2 包含 页面 3</H2>
        <IFRAME id=iframe23 src="p3.html" frameBorder=0 scrolling=no>
            <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE>
            <META content=editplus name=generator>
            <META content="" name=author>
            <META content="" name=keywords>
            <META content="" name=description></HEAD>
            <BODY>
            <H3>页面 3 被页面 2 包含！</H3></BODY>
            </HTML>
        </IFRAME>
        </BODY>
        </HTML>
    </IFRAME><H1>页面 1 包含 页面 3</H1>
    <IFRAME id=iframe13 src="p3.html" frameBorder=0 scrolling=no>
        <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE>
        <META content=editplus name=generator>
        <META content="" name=author>
        <META content="" name=keywords>
        <META content="" name=description></HEAD>
        <BODY>
        <H3>页面 3 被页面 2 包含！</H3></BODY>
        </HTML>
    </IFRAME><BR><TEXTAREA id=ttaOutput rows=20 cols=60></TEXTAREA>
    <SCRIPT defer type=text/javascript>
    <!--
    function getFullHTML(doc)
    {
    var fullHTML;
    var aIframeHTML = new Array(); for (var i=0; i<doc.frames.length; i++)
    {
    aIframeHTML.push(getFullHTML(doc.frames[i].document));
    } fullHTML = doc.documentElement.outerHTML; if(aIframeHTML.length > 0)
    {
    var regIframe = /<\/iframe>/gi;
    var ind = 0;
    fullHTML = fullHTML.replace(regIframe, function($0) {
    return aIframeHTML[ind++] + $0 + "\n\n";
    });
    } return fullHTML;
    }document.getElementById("ttaOutput").value = getFullHTML(document);
    //-->
    </SCRIPT>
     </BODY></HTML>
      

  16.   

    to yixianggaogoodly~我正在尝试HTML逐节点克隆到一个XML文档。不知道还有高手有更好的方案没？ 暂时不结贴
      

  17.   

    查了一下，简单修改后，已兼容 FF，在 IE 7 和 FF 3 测试通过！L@_@K
    p1.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
    <h1>页面 1 包含 页面 2</h1>
    <iframe id="iframe12" frameborder=0 scrolling=no src="p2.html"></iframe> <h1>页面 1 包含 页面 3</h1>
    <iframe id="iframe13" frameborder=0 scrolling=no src="p3.html"></iframe>
    <br />
    <textarea id="ttaOutput" rows="20" cols="60"></textarea><input type="button" value="show" id="btnShow" /> <script type="text/javascript" defer>
    <!--
    function getFullHTML(win)
    {
    var fullHTML;
    var aIframeHTML = new Array();
    var cFrame = win.document.frames || win.frames; for (var i=0; i<cFrame.length; i++)
    {
    aIframeHTML.push(getFullHTML(cFrame[i]));
    } // For IE only.
    //fullHTML = win.document.documentElement.outerHTML;
    fullHTML = "\n<HTML>\n" + win.document.documentElement.innerHTML + "\n</HTML>\n"; if(aIframeHTML.length > 0)
    {
    var regIframe = /<\/iframe>/gi;
    var ind = 0;
    fullHTML = fullHTML.replace(regIframe, function($0) {
    // For IE only.
    //return aIframeHTML[ind++] + $0 + "\n\n";
    return "\n<HTML>\n" + aIframeHTML[ind++] + $0 + "\n</HTML>\n";
    });
    } return fullHTML;
    }function $(sId) {
    return document.getElementById(sId);
    }$("btnShow").onclick = function() {
    $("ttaOutput").value = getFullHTML(window);
    };
    //-->
    </script>
     </body>
    </html>
      

  18.   

    需求变更：要给每个节点增加两个属性，一个窗口相对顶级窗口XPath集，一个节点相对窗口XPath。无奈只能采用的还是递归结贴PS：散分，参与者1分，有价值参与者平均分剩余分。