javascript - 获取实际输出 HTML 的函数

Question

运行一些动态构建图像数组的 JavaScript。

这是简化版:

    var imgArray = new Array(
        "mainBG.jpg",
        "mainBG2.jpg",    
        "mainBG3.jpg",
        "mainBG4.jpg"
    );

    var img = Math.floor(Math.random()*imgArray.length);

    jQuery(document).ready(function() {
        $("body").ezBgResize({img : "/lib/img/bkgr/" + imgArray[img]});
    });

    function generateThumbs(){
         var t = document.getElementById("thumbs");
         var ret = '';

        for(i=0;i<imgArray.length;i++){

            var image = imgArray[i];

            ret += '<a href="#" onclick="changeBig(\''+image+'\')" /><img src="/lib/img/bkgr/'+image+'" alt="thumbnail image" width="77" height="44" /></a>';
        }      

        return ret;        
    };

    function changeBig(bg){
        $("body").ezBgResize({img : "/lib/img/bkgr/" + bg});
    }

然后在页面中，它被简单地写出:

 <div class="scrollable">   
    <div class="items" id="thumbs">
        <script>document.write(generateThumbs());</script>
    </div>
</div>

问题是，当我查看源代码时，它从不输出实际的 HTML。来源只是显示了那条线。有没有办法让该函数实际将 HTML 输出到页面中——部分是为了 SEO，但也有一些 jQuery 可以与之交互 ？

Answer 1

当您查看源代码时，您所看到的只是从网络服务器返回到浏览器的代码，没有 javascript 对 dom 进行任何修改。要在原始源代码中获取代码，您需要在服务器端生成它。

要查看生成的带有 javascript 修改的源代码，您可以使用 firefox 中的 firebug 或 Chrome/Safari/IE9 中的内置开发人员工具。