同步 iframe

大佬教程收集整理的这篇文章主要介绍了同步 iframe，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决同步 iframe？

我想同步多个 iframe。 IE。如果我在一个 iframe 中进行更改，则结果应显示在所有其他框架中。

背景： 我想在不同的显示尺寸上并行显示显示。

但是，我现在有一个循环调用。每个操作都会更改当前页面的 URL。我想在其他 iframe 中显示这个 URL。

HTML 代码

<div>
    <h3>local display landscape</h3>
    <iframe ID="iframe_unit_landscape" name="iframe_unit_landscape" onload="loadiframe(0)"
        src="http://localhost:3000/mainmenu.HTML" height="240" wIDth="320" class="iframe">
    </iframe>
</div>

<div>
    <h3>local display porTrait</h3>
    <iframe ID="iframe_unit_porTrait" name="iframe_unit_porTrait" onload="loadiframe(1)"
        src="http://localhost:3000/mainmenu.HTML" height="320" wIDth="240" class="iframe">
    </iframe>
</div>

<div>
    <h3>iPhone 8 landscape</h3>
    <iframe ID="iframe_iphone8_landscape" name="iframe_iphone8_landscape" onload="loadiframe(2)"
        src="http://localhost:3000/mainmenu.HTML" height="375" wIDth="667" class="iframe">
    </iframe>
</div>

<div>
    <h3>iPhone 8 porTrait</h3>
    <iframe ID="iframe_iphone8_porTrait" name="iframe_iphone8_porTrait" onload="loadiframe(3)"
        src="http://localhost:3000/mainmenu.HTML" height="667" wIDth="375" class="iframe">
    </iframe>
</div>

Js代码

<script>
const iframes = ['iframe_unit_landscape','iframe_unit_porTrait','iframe_iphone8_landscape','iframe_iphone8_porTrait'];

function loadiframe(ID) {
    let iframe = document.getElementByID(iframes[ID]); 

    for (var i = 0; i < iframes.length; i++) {
        if (i !== iframE) {
           var dest = document.getElementByID(iframes[i]).src = src;
        }
    }
};
</script>

解决方法

src

const iframes = ['iframe_unit_landscape','iframe_unit_porTrait','iframe_iphone8_landscape','iframe_iphone8_porTrait'].map(id => document.getElementById(id));

iframes.forEach(iframe => iframe.addEventListener('load',_ => iframes.filter(frame => frame.src != iframe.srC).forEach(frame => frame.src = iframe.srC)));