页面异步加载js，动态生成div，页面变形问题

昨天发了个贴关于异步加载js的问题，这个问题解决了。现在问题又有了，由于我是异步加载了js，js里是动态生成了一个div。但是由于是异步加载，这个创建的div没有显示的原来的位置。例如我页面中是
<div>
<script>
var div = document.createElement("div");
div.setAttribute("id","adunion_html_id");
//div.style.width="auto";
// div.style.height="auto";
document.body.appendChild(div);
var adunion_id = "1";
(function(){
var ad = document.createElement("script");
ad.type="text/javascript";
ad.charset="utf-8";
ad.async = true;
ad.src="http://union.51g3.com/adunion.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(ad,s);
})();
</script>
</div>
 我在页面异步加载js之前，想预先占留一个位置，异步加载之后读出内容到这个div。现在由于创建的div被加到了body的子节点，document.body.appendChild(div);所以无法在加在div内，导致变形。但是又因为无法确认要加的父节点。因为我有很多不同页面要加上这段代码，有的可能是在table里，所以无法像非异步那样直接输出页面占留位置。有没有一种比较好的解决方案？可以实现像非异步加载那样不变形。

解决方案 »

  1.   

    异步加载script也有onload事件的啊，你只需要定义一个临时函数 function l（）{

    }
    然后让script的回调函数指向它就好了，然后在里面吧你读出来的内容写到你的DIV里的
      

  2.   

    不太明白，能说详细点吗？我现在没有用到onload，也没有用到回调函数。我上面那段已经能够实现异步加载了，只不过创建的div不在原来的位置了。onload可以指定位置吗？
      

  3.   

    你说的onload只是异步加载的一种方式吧。还是没办法确定div的位置啊
      

  4.   

    可以给div设置id，设置div的高度和宽度，最后再将内容添加到div里面去
      

  5.   


    <html>
    <head>
    </head>
    <body>
    </body>
    <script type="text/javascript" onload="alert(1)">
        var div = document.createElement("div");
        div.setAttribute("id", "adunion_html_id");
        //div.style.width="auto";
        // div.style.height="auto";
        document.body.appendChild(div);
        var adunion_id = "1";
        (function () {
            var ad = document.createElement("script");
            ad.type = "text/javascript";
            ad.charset = "utf-8";
            if (window.navigator.userAgent.indexOf("MSIE") >= 1)
            //如果浏览器为IE
            {
                var it = setInterval(function () {
                    if (ad.readyState == "complete") {
                        clearInterval(it);
                        div.innerHTML =a;
                    }
                }, 200);
            }
            else //如果浏览器为Firefox
            {
                if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                    ad.onload = function () {
                        div.innerHTML = a;
                    }
                }
            }
            ad.async = true;
            ad.src = "test.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(ad, s);
        })();
    </script>
    </html>
    test.js
    var a ="你好";不同的浏览器对JS的加载完成是不一样的。
    这个方法也是某些JS框架的jsonp请求的原理。