1.代码及问题
vue代码
<template>
<iframe
id="iframe"
frameborder="0"
allowtransparency="true"
></iframe>
</template>
js代码
mounted() {
const iframe = document.getElementById("iframe").contentDocument ||
document.frames["iframe"].document
const iframeBody = iframe.body
iframeBody.innerHTML = '<p>iframe部分内容</p>'
}
问题:chrome浏览器运行正常,firefox中,iframe内容不展示
2.解决问题
F12检查发现,firefox中,iframe的src属性为about:blank,将此属性设置为 javascript: 或者 about: 则火狐浏览器展示正常,而此时chrome中iframe不展示,因此,需要判断,如果是火狐浏览器,将iframe的src属性设置为 javascript: 或者 about: 即可解决
代码:
<template>
<iframe
id="iframe"
frameborder="0"
allowtransparency="true"
:src="iframeSrc"
></iframe>
</template>
data() {
return {
iframeSrc: navigator.userAgent.match("Firefox") ? 'javascript:' : ''
}
}