获取页面的 html 源代码，包括 Jquery 或 Javascript 动态创建的元素
[英]get html source code of a page including dynamically created elements by Jquery or Javascript
问题描述
Such questions are answered before but still i'm not getting a proper solution.
之前已经回答过此类问题，但我仍然没有得到适当的解决方案。 My approach is to get the html source code of 'body' tag and all of its children(dynamically creating) and then save them in session storage.我的方法是获取“body”标签及其所有子标签（动态创建）的 html 源代码，然后将它们保存在 session 存储中。 So that the page can be reload data with the help of this cache.这样页面就可以在这个缓存的帮助下重新加载数据。
I've done almose everything, just stucked on getting html source code.我已经完成了几乎所有的事情，只是坚持获取 html 源代码。
I can get html codes by:我可以通过以下方式获得 html 代码：
console.log($('body').html());
console.log(document.body.innerHTML);
where body tag is like: 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>
But i'm not getting the 'value' string of input tag.但我没有得到输入标签的“值”字符串。 For better understanding: execute the following code:为了更好的理解：执行以下代码：
<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>
Now write something in the Textbox and press "Get Html" button.现在在文本框中写一些东西，然后按“获取 Html”按钮。 Now check the console.现在检查控制台。 There will be html source but "textbox" value will be not there.将有 html 来源，但“文本框”值将不存在。
I know we can get input value by .value but that will be the patchy solution.我知道我们可以通过.value获取输入值，但这将是不完整的解决方案。 I'm looking for some code by which we can get complete source code of body tag including values and attributes of dynamically created/modified elements.我正在寻找一些代码，通过这些代码我们可以获得 body 标签的完整源代码，包括动态创建/修改元素的值和属性。
3 个解决方案
解决方案1
0 2017-03-24 06:27:36
I completely agree with @nnnnnn's comment on the question... 我完全同意@nnnnnn对这个问题的评论...
I wouldn't try to save application state by saving HTML, I'd be looking at keeping the application state in a JS object and then save a serialised version of that object (JSON).
However , you can do the following to achieve what you want - it is probably the dodgiest thing i've seen in a while though... (do not recommend)... 但是 ，您可以执行以下操作来实现所需的目标-尽管这可能是我一段时间以来见过的最笨拙的事情...（不建议）...
$(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() does not return changed values jQuery html（）不返回更改的值
解决方案2
0 2017-03-24 07:43:14
解决方案3
0 2022-11-21 20:45:18
This is not a developer but an admin way...这不是开发人员，而是管理员方式......
Just open your page in Chrome, open Dev Tools, and click on the pointer button on the Elements tab.只需在 Chrome 中打开您的页面，打开 Dev Tools，然后单击 Elements 选项卡上的指针按钮。 Chrome will show you the static HTML source... Chrome 会显示 static HTML 源...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.