獲取頁面的 html 源代碼，包括 Jquery 或 Javascript 動態創建的元素

Question

之前已經回答過此類問題，但我仍然沒有得到適當的解決方案。 我的方法是獲取“body”標簽及其所有子標簽（動態創建）的 html 源代碼，然后將它們保存在 session 存儲中。 這樣頁面就可以在這個緩存的幫助下重新加載數據。

我已經完成了幾乎所有的事情，只是堅持獲取 html 源代碼。

我可以通過以下方式獲得 html 代碼：

console.log($('body').html());
console.log(document.body.innerHTML);

body 標簽是這樣的：

    <body>
    <input type="button" id="btnconsole" value="Get Html">
    <div id="divcontainer" style="background-color:blue; height:100%; width:100%;">
        <input type="text" id="textbox">
    </div>
</body>

但我沒有得到輸入標簽的“值”字符串。 為了更好的理解：執行以下代碼：

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#btnconsole").on('click',function(){
                    console.log($('body').html());
                    //console.log(document.body.innerHTML);
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btnconsole" value="Get Html">
        <div id="divcontainer" style="background-color:blue; height:100%; width:100%;">
            <input type="text" id="textbox">
        </div>
    </body>
</html>

現在在文本框中寫一些東西，然后按“獲取 Html”按鈕。 現在檢查控制台。 將有 html 來源，但“文本框”值將不存在。

我知道我們可以通過.value獲取輸入值，但這將是不完整的解決方案。 我正在尋找一些代碼，通過這些代碼我們可以獲得 body 標簽的完整源代碼，包括動態創建/修改元素的值和屬性。

Answer 1

我完全同意@nnnnnn對這個問題的評論...

我不會嘗試通過保存HTML來保存應用程序狀態，而是要將應用程序狀態保存在JS對象中，然后保存該對象的序列化版本（JSON）。 然后根據需要通過從狀態對象中的值重新創建HTML來恢復狀態。

但是，您可以執行以下操作來實現所需的目標-盡管這可能是我一段時間以來見過的最笨拙的事情...（不建議）...

 $(document).ready(function() { $("#btnconsole").on('click', function() { $("input").each(function() { $(this).attr("value", $(this).val()); }); console.log($('body').html()); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" id="btnconsole" value="Get Html"> <div id="divcontainer" style="background-color:blue; height:100%; width:100%;"> <input type="text" id="textbox" value="initial"> </div>

jQuery html（）不返回更改的值

Answer 2

終於，我經過一番努力...我使用的是domJSON

和

var elem =  document.getElementsByTagName('body')[0];

var o = domJSON.toJSON(elem);

console.log(JSON.stringify(o));

Answer 3

這不是開發人員，而是管理員方式......
只需在 Chrome 中打開您的頁面，打開 Dev Tools，然后單擊 Elements 選項卡上的指針按鈕。 Chrome 會顯示 static HTML 源...

獲取頁面的 html 源代碼，包括 Jquery 或 Javascript 動態創建的元素

問題描述

3 個解決方案

解決方案1
0 2017-03-24 06:27:36

解決方案2
0 2017-03-24 07:43:14

解決方案3
0 2022-11-21 20:45:18

獲取頁面的 html 源代碼，包括 Jquery 或 Javascript 動態創建的元素

問題描述

3 個解決方案

解決方案1 0 2017-03-24 06:27:36

解決方案2 0 2017-03-24 07:43:14

解決方案3 0 2022-11-21 20:45:18

解決方案1
0 2017-03-24 06:27:36

解決方案2
0 2017-03-24 07:43:14

解決方案3
0 2022-11-21 20:45:18