记录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()方法输出的内容会覆盖之前所有的内容。

猜你喜欢

转载自blog.csdn.net/qq_36821274/article/details/127323030
今日推荐