如何使用 iframe 更改页面上的内容并平滑溶解？
在信息屏幕上，我想在不同的页面之间切换，并且希望它们能够顺利溶解。我的想法是有两个 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
您可以使用事件侦听器来侦听 iFrame 的 onLoad 事件，如下所示：iframeEl.addEventListener('load', function() { // Do whatever you like}, true);
随时随地看视频慕课网APP
相关分类
JavaScript