# 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.

為了不在頁面初始化的時候，同時加載多個類似功能api，想通過Promise 實現動態加載。基本邏輯如下：

let getBaiduGeo = new Promise((resolve, reject) => {
        let baiduGeo_url =
          "http://api.map.baidu.com/api?v=3.0&ak=GgdUzLNYFlZKrdDPzei6gxc0DMCxTNdy";
        let baiduGeo_api_dom = document.createElement("script");
        baiduGeo_api_dom.charset = "utf-8";
        baiduGeo_api_dom.src = baiduGeo_url;
        baiduGeo_api_dom.id = "baiduGeoid";
        document.head.appendChild(baiduGeo_api_dom);

        if (document.getElementById("baiduGeoid")) {
          resolve();
        } else {
          reject(err);
        }
      });
      getBaiduGeo
        .then(() => {
          var geolocation = new BMap.Geolocation();
          geolocation.getCurrentPosition(function (r) {
            if (r) {
              console.log(
                `<-----getLocationPoweredByBaiduGeoJS
            ${JSON.stringify(result)}
            getLocationPoweredByBaiduGeoJS----->`
              );
            } else {
              getQingJsAPI();
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });

      let getQingJsAPI = function () {
        let getQingJs = new Promise((resolve, reject) => {
          let qingjs_url =
            "https://static.yunzhijia.com/public/js/qing/latest/qing.js";
          let qingjs_api_dom = document.createElement("script");
          qingjs_api_dom.charset = "utf-8";
          qingjs_api_dom.src = qingjs_url;
          qingjs_api_dom.id = "qingjsid";
          document.head.appendChild(qingjs_api_dom);
          if (document.getElementById("qingjsid")) {
            resolve();
          } else {
            reject(err);
          }
        });
        getQingJs.then(() => {
          qing.call("getLocation", {
            success: function (result) {
              console.log(
                `<-----getLocationPoweredByQingJS
            ${JSON.stringify(result)}
            getLocationPoweredByQingJS----->`
              );
            },
          });
        });
      };

運行時，遇到了瀏覽器報錯：

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.

大意，寫入失敗。不能通過異步加載的方式加載額外的腳本，除非顯示的被打開？

不太懂：

網上查：

An asynchronously loaded script is likely going to run AFTER the document has been fully parsed and closed. Thus, you can't use document.write() from such a script (well technically you can, but it won't do what you want).

You will need to replace any document.write() statements in that script with explicit DOM manipulations by creating the DOM elements and then inserting them into a particular parent with .appendChild() or .insertBefore() or setting .innerHTML or some mechanism for direct DOM manipulation like that.

https://stackoverflow.com/a/24297863

大意：文檔流加載完畢，無法再通過write插入腳本。

但是可以通過appendChild()或者insertBefore()或者innerHTML 寫入。

但是我並沒有通過write()方法寫入啊

單獨測試：

qingjs：

        let getQingJs = new Promise((resolve, reject) => {
          let qingjs_url =
            "https://static.yunzhijia.com/public/js/qing/latest/qing.js";
          let qingjs_api_dom = document.createElement("script");
          qingjs_api_dom.charset = "utf-8";
          qingjs_api_dom.src = qingjs_url;
          qingjs_api_dom.id = "qingjsid";
          document.head.appendChild(qingjs_api_dom);
          if (document.getElementById("qingjsid")) {
            resolve();
          } else {
            reject(err);
          }
        });
        getQingJs.then(() => {
          qing.call("getLocation", {
            success: function (result) {
              console.log(
                `<-----getLocationPoweredByQingJS
            ${JSON.stringify(result)}
            getLocationPoweredByQingJS----->`
              );
            },
          });
        });

沒問題，可以正常加載內容：

<-----getLocationPoweredByQingJS
{"success":"true","errorCode":"","data":{"address":"浙江省台州市黃岩區東城街道永高股份(東南門)永高股份有限公司(雙浦廠區)","city":"台州市","longitude":121.29986843532986,"district":"黃岩區","addressdetail":"浙江省台州市黃岩區東城街道永高股份(東南門)永高股份有限公司(雙浦廠區)","latitude":28.663372667100695,"accuracy":65,"name":"永高股份(東南門)永高股份有限公司(雙浦廠區)","province":"浙江省"},"error":""}
getLocationPoweredByQingJS----->

百度api單獨測試：

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=GgdUzLNYFlZKrdDPzei6gxc0DMCxTNdy">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"
    </script>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript">
        // var map = new BMap.Map("container");

        // var point = new BMap.Point(116.331398, 39.897445);
        // map.centerAndZoom(point, 12);

        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r) {
            console.log(r);
            alert('您的位置：' + r.point.lng + ',' + r.point.lat);

            return;
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            } else {
                alert('failed' + this.getStatus());
            }
        });
    </script>
</body>

</html>

依舊報同樣錯誤：

定位到代碼位置：

原來是BaiduAPI 中寫有write，所以才會報錯，與我無瓜，百度的這個api不能這樣動態加載。