一
在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 styles if (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' + url window[`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 styles let img if (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 + url window[`${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唯一。 问题解决~
