在信息屏幕上，我想在不同的頁面之間切換，并且希望它們能夠順利溶解。我的想法是有兩個 iframe。顯示一個 iframe > 通過發(fā)送“swap('anotherpage.php')”更改第二個 iframe 中的內(nèi)容，并通過在 iframe 上切換不透明度來進(jìn)行轉(zhuǎn)換。我當(dāng)前的代碼可以正常工作，但是如果在獲取新頁面時出現(xiàn)延遲，則溶解不順暢。如何確保新頁面在溶解之前已完全加載？也許我的方法是錯誤的？<!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>
如何使用 iframe 更改頁面上的內(nèi)容并平滑溶解？
明月笑刀無情
2021-06-02 11:02:08
