记录vue插入第三方控件不起效果

业务需求第三方是比较老的版本，用的jquery

对方的插件是使用js引入进去的，根据id进行传参到js里面

如：<script src="http://0.0.0.0/xxx/xxx/?xxx=xxx&xxx=xxx&xxx='" />这种方式

 对方业务是页面加载立即执行。

1、在创建script标签，（此方法标签生成了，也有内容，但是插件没有插入页面，寻常方法可用）

let element=document.createElement("script");
element.type="text/javascript";
element.src="http://0.0.0.0/xxx/xxx/?xxx=xxx&xxx=xxx&xxx="
document.body.appendChild(element);

2、 通过document.write方法插入页面（可行）

document.write='<script src="http://0.0.0.0/xxx/xxx/?xxx=xxx&xxx=xxx&xxx='" />'

总结：vue文件里面不能直接引入script，可通过iframe标签来完成插件引入，插件在html页面里面执行相关方法。最后我重新创建了一个html通过iframe引入，如何在这个html里面使用document.write成功创建插件。

小知识：

iframe子页面获取父页面的值：

父页面：

<input id="extension" v-model="extension" hidden/>

子页面：

window.parent.document.getElementById('extension').value;

 关于document.write方法

document.write()方法可以向HTML输出流中插入你传入的内容，浏览器会按着HTML元素依次顺序依次解析它们，并显示出来。

需要注意的是，如果在文档加载完成后（即HTML输出已完成），再使用document.write()方法来要求浏览器来解析你的内容，则浏览器就会重写整个document，导致最后的这个document.write()方法输出的内容会覆盖之前所有的内容。