Javascript通过创建iframe异步加载解决跨域问题-自学php网

Javascript通过创建iframe异步加载解决跨域问题

来源：未知时间：2015-07-29 11:48 作者：xxadmin 阅读:次

[导读] 本文讲解Javascript通过创建iframe异步加载解决跨域问题很多情况下广告的同步加载会影响大主页面的加载，导致主页面的onload事件的执行被延迟，这里提供了一个简单的异步加载广告的...

本文讲解Javascript通过创建iframe异步加载解决跨域问题

很多情况下广告的同步加载会影响大主页面的加载，导致主页面的onload事件的执行被延迟，这里提供了一个简单的异步加载广告的方法。

例如a.html为主页面

XML/HTML代码

<!doctype html>  
<html>  
<head>  
    <title>test page</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    </head>  
    <body>  
    <div>  
    <p>广告位之前内容</p>  
      
    <p>广告将会异步加载:</p>  
    <div style="width:300px; height:250px; border:solid 1px red">  
    <script type="text/javascript" src="js/z.js"></script>  
    </div>  
      
    <p>我在广告位之后，但广告位不会影响我加载</p>  
    </div>  
      
</body>
</html>

下面是z.js的代码：

Java代码

    (function(d) {  
        document.write('<div id="adbox"></div>');  
        var iframe = document.getElementById('adbox').appendChild(d.createElement('iframe'));  
        doc = iframe.contentWindow.document;  
        iframe.style.cssText = "width:300px;height:250px;";  
        doc.open().write('<body onload="var di = document;var tt = di.createElement(\'script\');tt.src=\'http://www.trindo.cn/22.js\';di.body.appendChild(tt);">');  
        doc.close();  
    })(document);

主要的思路就是同步创建一个DIV，这个基本上对页面加载的影响可以忽略。然后通过异步的方式向这个DIV中追加一个iframe，由这个iframe负责加载广告内容，并且这个iframe的加载方式同样也是异步方式，不会影响到主页面的load。

下面看一下22.js文件，无外乎就是处理请求，抛出素材，这里简化下，直接向iframe的body内赋值。

Java代码

    //var e = document.createElement("input");  
    //e.type = "button";  
    //e.value = "点我";  
    //document.body.appendChild(e);  
    //或者通过上面的appendChild进行节点添加，但是切记不要用document.write输出内容  
    document.body.innerHTML = '测试内容';

上面通过SRC加载URL地址的加载方式可能在平时主要的广告部署方式下并不常见，更多的则是一段JS代码。例如百度的广告代码

XML/HTML代码

    <script type="text/javascript" >BAIDU_CLB_SLOT_ID = "******";</script>  
    <script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"></script>

这里是在body中加载的，是无法通过SRC来实现的。这时我们可以通过向iframe的BODY中动态写入内容的方式来执行。

代码如下：

JavaScript代码

    <iframe id="iframe_id" frameBorder=0 scrolling="no" width="300" height="250"></iframe><script>(function(TS_i){var TS_d = TS_i.contentWindow.document;TS_i.setAttribute('marginheight',0);TS_i.setAttribute('marginwidth',0);TS_d.write('<!doctypehtml><html><body style="padding:0;margin:0">JS广告代码放到这里</body></html>');TS_d.close();})(document.getElementById('iframe_id'));</script>

这样的话实际上广告是算在iframe中加载的，不会阻塞主页面的加载速度，而且不存在跨域的问题。

但是在实际部署中，在IE8以下的IE内核浏览器中会存在广告尚未加载完成，页面已经终止的情况。具体原因是IE8以下的浏览器的document.close()的执行并不会向其它浏览器那样会等待document中的内容加载完成后再执行。即：百度广告平台的代码刚刚开始执行，尚未解析出该抛出什么广告的时候，页面已经开始执行document.close（）已经将文档关闭，广告代码的加载就被终止了。如果你不写document.close()的话此问题将不存在，但是会影响整个主页面的onload事件。

还有一种方式，就是判断浏览器，在IE8以下用延迟执行document.close()的方式解决此问题，但是同样也会多少影响主页面onload事件。

JavaScript中利用Array和Object实现Map的方法

javascript 同步、异步各种执行方式的顺序讲解

子栏目

Javascript通过创建iframe异步加载解决跨域问题

最新评论

添加评论

更多文章推荐

添加评论