demo请狠狠的戳这里: https://download.lllomh.com/cliect/#/product/IB02378830612627
被嵌页面:
test1.html
<script type="text/javascript">
let origin='https:www.lllomh.com';
document.addEventListener('DOMContentLoaded',sendTmb())
window.setTimeout(function() {
if (origin!==null) sendHeight()
},3000)
function sendTmb(){
let ret = {}
ret['tmb']='https://www.lllomh.com/static/images/photos.jpg';
window.parent.postMessage(ret,origin)
}
function sendHeight(){
let ret = {}
ret['height']=65;
window.parent.postMessage(ret,origin)
}
</script>调取的页面:
iframe.html
<html>
<body>
<iframe id="iframeEle"
width="920"
height="15000"
src="https://test.lllomh.com/test1.html"
scrolling="no"
style="border: 0; margin:0; padding: 0;"
>
</iframe>
<script>
window.addEventListener("message", receiveMessage);
function receiveMessage(event) {
if(event.data['tmb'] !== undefined ){
console.log(event.data['tmb']);
}
if(event.data['height'] !== undefined ){
console.log(event.data['height']);
document.getElementById('iframeEle').setAttribute('height', event.data['height']+'px');
}
}
</script>
</body>
</html>注意: 被嵌页面的访问域名 要跟被嵌页面 上的 origin 保持一致:
不然会发生 错误
既 比如:
test.html 放在test.lllomh.com 域名下面 // 调取的页面:
iframe.html 放在lllomh.ocm 域名下面 // 被嵌页面
那么 test1.html中的 origin 要写 被嵌页面: lllomh.ocm 的域名一致 https 或者http.