一、
在html里加
<meta name="referrer" content="no-referrer" />
是个办法 但是我们业务需要使用referer 所以我这里不能加。
二、
<div class="iframeLogo" v-if="logoFileSrc && logoFileSrc.includes('mmbiz_')" v-html="ImgFun(logoFileSrc, 'logo')"></div><img class="info_logo" v-else :src="logoFileSrc">
ImgFun (url, type) {let stylesif (type === 'logo') {styles = 'width:58px;height:58px;position:absolute;top:0;left:0;'} else if (type === 'bg') {styles = 'width:300px;height:200px;position:absolute;top:0;left:0'}var randomId = 'img' + urlwindow[`img${url}`] = '<img id="img" style=\'' + styles + '\' src=\'' + url + '?' + 'img' + '\'/><script>window.onload = function() { parent.document.getElementById(\'' + randomId + '\').height = 100+\'%\'; } <' + '/script>'var iframeStr = `<iframe id=${randomId} src="javascript:parent['img${url}']" frameBorder="0" scrolling="no" width="100%" ></iframe>`return iframeStr},
背景图:
<div class="iframeBG" v-if="bgFileSrc && bgFileSrc.includes('mmbiz_')" v-html="ImgFun(bgFileSrc, 'bg')"></div>
.iframeBG {width: 285px;height: 198px;position: absolute;border-radius: 5px;overflow: hidden;}
注意: 当一个页面里出现两张相同路径的图片时,会出现样式错乱问题,如下图。
但是两张不同的图片就不会有问题
分析iframe的代码得知,问题出在这行代码上window[img${url}
]randomId
iframe嵌入的时候根据src="javascript:parent['img${url}']"
randomId
来决定嵌入的元素以及样式。
当两张图片一样时, 图片的url也是一模一样的。 虽然调用ImgFun
方法的时候,进type的判断了。 但是由于id是相同的,在iframe进行渲染的时候,后面的样式代码会把前面的进行覆盖,所以会出现上面的问题。
解决办法: 既然是 “不唯一” 造成的问题,可以把id和img加参数 作为唯一标识。
ImgFun (url, type) {let styleslet imgif (type === 'logo') {img = 'imgLogo'styles = 'width:58px;height:58px;position:absolute;top:0;left:0;'} else if (type === 'bg') {img = 'imgBg'styles = 'width:300px;height:200px;position:absolute;top:0;left:0;'}var randomId = img + urlwindow[`${img}${url}`] = '<img id="img" style=\'' + styles + '\' src=\'' + url + '?' + 'img' + '\'/><script>window.onload = function() { parent.document.getElementById(\'' + randomId + '\').height = 100+\'%\'; } <' + '/script>'var iframeStr = `<iframe id=${randomId} src="javascript:parent['${img}${url}']" frameBorder="0" scrolling="no" width="100%" height="100%"></iframe>`return iframeStr},
可以看出 id唯一。 问题解决~