JS json

<script type="text/javascript" src="../json/differ.json"></script>

<script type="text/javascript">
    window.onload = function () {
        
        var cont = document.getElementById("content");
        var inner = "";
        for (var i = 0; i < list.length; i++) {
            inner += "<div style='margin: 0 auto; width: 80%; height: 120px; color:#979797; background-color:#FFFFFF;text-align:center'><div style='width:30%;height:80%;float:left;padding-top:24px '><font size='4' color='#333'>" + list[i].DifferType + "</font><br>合同件：" + list[i].LeftText + "<br>扫描件：" + list[i].RightText + "</div><div style='width: 70%; float:right; height: 80%; padding-top:24px'><font size='4' color='#333'>细节截图：</font><br /><img width='500' height='10' src='" + list[i].LeftPicPath + "'/><br><img width='500' height='10' src='" + list[i].RightPicPath + "'/></div></div><br>";
        }
        cont.innerHTML += inner;
    }
</script>

<div id="content">
</div>

  model.html with   JS's code:↑　　

json's code:↓

list=[
　　{
　　　　"PageNo":1,
　　　　"DifferType":"编辑",
　　　　"LeftText":"1",
　　　　"RightText":"2",
　　　　"LeftPicPath":"../pic/0.1.jpg",
　　　　"RightPicPath":"../pic/0.2.jpg"
　　},
　　{
　　　　"PageNo":1,
　　　　"DifferType":"删除",
　　　　"LeftText":"]",
　　　　"RightText":"无",
　　　　"LeftPicPath":"../pic/1.1.jpg",
　　　　"RightPicPath":"../pic/1.2.jpg"
　　}
]

　　json是由字符串“list=” + 一个class结构转json字符串的结果。

这样在加载mode.html时，会自动去路径寻找json文件。

 

其中：window.onload=function(){}

<script type="text/javascript">
window.onload=function(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
</script>

　　

网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式:

（1）.将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。

（2）.通过window.onload来执行脚本代码。

 

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World"：

document.getElementById("demo").innerHTML="Hello World";