引入百度地图js时产生的问题

2017-01-11  本文已影响0人  Ernest_Chou

页面引入百度地图API:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3&ak=XhxWo4lQh2KfH3phyElA17ljQC1wwqjT"></script>

产生如下问题:

api:1 A Parser-blocking, cross-origin script, http://api.map.baidu.com/getscript?v=1.3&ak=XhxWo4lQh2KfH3phyElA17ljQC1wwqjT&services=&t=20150527115231, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.

即为报错:A Parser-blocking, cross-origin script, is invoked via document.write.
在页面渲染完成后就不能使用 document.write 方法。
根据博客的说明尝试如下方法:

<script>
            //异步加载百度地图,解决谷歌等浏览器在页面渲染完成后就不能使用 document.write 方法的问题:
            var cnzz_s_tag = document.createElement('script');
            cnzz_s_tag.type = 'text/javascript';
            cnzz_s_tag.async = true;
            cnzz_s_tag.charset = 'utf-8';
            cnzz_s_tag.src = 'http://api.map.baidu.com/api?v=1.3&ak=XhxWo4lQh2KfH3phyElA17ljQC1wwqjT&async=1';
            var root_s = document.getElementsByTagName('script')[0];
            root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
        </script>

出现问题:

api:1 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

后来发现页面引入的百度的js内容为:

(function(){ 
        window.BMap_loadScriptTime = (new Date).getTime(); 
        document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.3&ak=XhxWo4lQh2KfH3phyElA17ljQC1wwqjT&services=&t=20150527115231"></script>');
        document.write('<link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/13/bmap.css" />');
})();

里面包含了 document.write方法,异步加载的js是不允许使用document.write方法的

直接引用这两个地址的jshttp://api.map.baidu.com/getscript?type=quick&file=api&ak=o9B4Ol99j9NcBXSu5nFTR7uI&t=20140109092002http://api.map.baidu.com/getscript?type=quick&file=feature&ak=o9B4Ol99j9NcBXSu5nFTR7uI&t=20140109092002就可以了

上一篇下一篇

猜你喜欢

热点阅读