<script type="text/javascript" src="https://test.123456.com.cn/recall.min.js" charset="utf-8" async></script>
这种方法是在对页面解析的同时,下载js文件,一旦有下载完了,就先停止对页面的解析,执行下载完的那个js文件,当有多个js文件使用async的时候,不能保证执行顺序标签。
可见这个方式并不是我们最理想的方式,我们最理想的始终还是按需引入。
方式二:DOM元素插入(重点推荐)
这种方式更方便于封装成方法然后全局调用,文章最后会加上demo。
export default {
mounted() {
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = '你的js⽂件地址';
document.body.appendChild(script);
我在公司最近的项目就是二次封装SDK来进行视频回溯功能,加上代码大家可以参考:
const connectSDK = (productCode,src) => {
let dns = window.location.protocol;//请求头
let root = dns === 'http:' ? 'http://192.168.2.1/api' : 'https://test.123546.com.cn/api';//根据请求头自动切换内网地址和外网地址,这地址是我随便敲的,需要的换成自己的项目地址
if(!src) src = dns === 'http:' ? 'http://192.168.2.1/sdk.js' : 'https://test.123546.com.cn/sdk.js';
// 放置这段代码在SDK引入之前
window.__RECALL_PRODUCT_CODE = productCode;//产品标识
window.__RECALL_CHANNEL_VAL = "";
window.__RECALL_REQUEST_ROOT = root;
let script = document.createElement('script');
script.type = "text/javascript";
script.src = scr;
document.body.appendChild(script);
这种方式封装好js之后按需引入并调用SDK方法进行回溯录制就可以了,当然还需要设置openSDK和closeSDK的方法来使用,但这里主要讲解按需引入js包;
其外就是利用import引入和render方法。