javascript两个Windows比较内容?

Question

我是JS新手，但已经做了一些基本的帖子。在这种情况下，用户按下一个按钮，一个帖子发生在服务器上，服务器生成一堆json数据并将其发送回来。我想使用这个JSON数据并填充一个漂亮的页面，将其显示在左侧的"窗口"上。我会用"窗口"这个词，但它可能不正确。这个我可以算出来。

然后假设我想在右边显示一个类似的布局"窗口"但更新json数据。这样，用户就可以将两者并排比较。

我已经搜索了框架，但似乎那些是只加载现有的网页?我应该动态地创建新的网页，然后用我创建的网站填充框架吗?

讽刺的是，我在

看到的布局

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_get

正是我想要的。内容在左边，内容在右边，中间有分隔。(不是链接的实际示例)。

一些关于该走哪条路到哪里的一般性指导将会很有帮助。谢谢!

Answer 1

您可以尝试创建两个div，并排，并使用css样式使其看起来不错。在每个div中创建一个pre标签，并将json数据使用json .stringify格式化。pre标签告诉浏览器内容是预先格式化的，它可以按原样使用

演示:https://jsfiddle.net/hv8dyxzc/1/

var dataLeft = {
"code": 50,
"data": {
"list": [
{
"id": "10",
"date": "2021-02-03",
"status": "3"
},
{
"id": "20",
"date": "2021-01-26",
"status": "0"
},
],
"startDate": "2021-02-20",
"totalPages": 2
}
}
var dataRight = {
"code": 50,
"data": {
"list": [
{
"id": "10",
"date": "2021-02-04",
"status": "0"
},
{
"id": "20",
"date": "2021-01-26",
"status": "0"
},
],
"startDate": "2021-02-20",
"totalPages": 2
}
}

document.getElementById("json-left").innerHTML = JSON.stringify(dataLeft, undefined, 4);
document.getElementById("json-right").innerHTML = JSON.stringify(dataRight, undefined, 4);

.main-container{
display: flex;
flex-direction: row;
font-size: 0.8em;
background-color: #F1F1F1;
padding: 1em;
}
.window {
width: 45%;
border: 1px solid #BBB;
margin-right: 10px;
padding: 0.5rem;
background-color: #FFFFFF;
filter: drop-shadow(2px 2px 2px #BBB);
}

<div class="main-container">
<div class="window">
<pre id="json-left"></pre>
</div>
<div class="window">
<pre id="json-right"></pre>
</div>
</div>