在信息屏幕上，我想在不同的页面之间切换，并且希望它们能够顺利溶解。我的想法是有两个 iframe。显示一个 iframe > 通过发送“swap('anotherpage.php')”更改第二个 iframe 中的内容，并通过在 iframe 上切换不透明度来进行转换。我当前的代码可以正常工作，但是如果在获取新页面时出现延迟，则溶解不顺畅。如何确保新页面在溶解之前已完全加载？也许我的方法是错误的？<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Master</title> <style> * { -webkit-box-sizing: border-box; -webkit-backface-visibility: hidden; -webkit-transition: translate3d(0, 0, 0) } HTML, BODY { width: 1920px; height: 1080px; background-color: transparent; overflow: hidden; } #iframeOne { border: none; width: 1920px; height: 1080px; position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 1; transition: opacity 1s; } #iframeTwo { border: none; position: absolute; width: 1920px; height: 1080px; top: 0px; left: 0px; z-index: 1; opacity: 0; transition: opacity 1s; } #iframeOne.fade { opacity: 0; } #iframeTwo.fade { opacity: 1; }</style></head><body> <iframe id="iframeOne" src="firstpage.php"></iframe> <iframe id="iframeTwo"></iframe> <script type="text/javascript"> var swapNumber = 2; function swap(newUrl) { if (swapNumber == 1) { document.getElementById('iframeOne').src = newUrl; dissolve(); swapNumber = 2; } else if (swapNumber == 2) { document.getElementById('iframeTwo').src = newUrl; dissolve(); swapNumber = 1; } function dissolve() { iframeOne.classList.toggle('fade'); iframeTwo.classList.toggle('fade'); } } </script></body></html>
1 回答
DIEA
TA贡献1820条经验 获得超2个赞
您可以使用事件侦听器来侦听 iFrame 的 onLoad 事件，如下所示：
iframeEl.addEventListener('load', function() {
// Do whatever you like
}, true);
添加回答
举报
0/150
提交
取消