当前位置：文江博客话题详情

按特定顺序加载 HTML 框架而不会出现后退按钮问题？

发布于 2024-07-08 17:25:18 字数 496 浏览 6 评论 0原文

我有一个使用框架集的网页。

由于脚本和对象依赖性，我需要按特定顺序加载帧。

我使用这个例子作为模板： JavaScript 来源：导航：框架加载顺序

这会加载一个空页面代替我需要最后加载的页面，然后在加载第一页后将其替换为正确的页面。

但是：我还需要使用浏览器的后退按钮。如果您在上面的链接中运行示例，让两个框架都加载，然后单击“后退”按钮，顶部框架将恢复到临时空白页。然后需要再次单击“后退”按钮以导航到框架集之前的页面。

有没有办法强制框架按特定顺序加载，而无需此“后退”按钮行为 - 或者强制“后退”按钮跳过空白页面？

这需要与 Internet Explorer 6 和 7 配合使用，最好也与 Firefox 3 配合使用。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅听莫相离 2024-07-15 17:25:18

你在这篇文章中多次提到这一点......

这是一个遗留系统。需要框架集。

如果您正在开发遗留系统，那么我认为您是时候接受框架集在浏览器后退按钮方面的行为方式了。如果它确实是一个遗留系统，则不需要修复此行为。如果它实际上不是遗留系统并且您需要解决这个问题，那么您需要摆脱使用框架集。 HTML 标准已弃用框架集，不应使用。

回复收藏 0 原文

冷情 2024-07-15 17:25:18

为什么不按所需的顺序使用三个 iframe，然后调整它们的大小/将它们移动到适当的位置？

<iframe id="a1" src="page-to-load-first.htm"></iframe>
<iframe id="a2" src="page-to-load-second.htm"></iframe>
<iframe id="a3" src="page-to-load-third.htm"></iframe>
<script>
function pos(elem,x,y,w,h) {
   if (!elem.style) elem=document.getElementById(elem);
   elem.style.position='absolute';
   elem.style.top = y+'px';
   elem.style.left= x+'px';
   elem.style.width=w+'px';
   elem.style.height=h+'px';
}
window.onload = function() {
    window.onresize=function() {
        var w = window.innerWidth || document.documentElement.clientWidth;
        var h = window.innerHeight || document.documentElement.clientHeight;
        var w3 = w/3;
        var h2 = h/2;
        pos('a1',0,0,w3,h); /* left 1/3rd */
        pos('a2',w3,0,w3+w3,h2);
        pos('a3',w3,h2,w3+w3,h2);
    };
    window.onresize();
};
</script>

Why not use three iframes in the desired order, then resize/move them to the appropriate places?

<iframe id="a1" src="page-to-load-first.htm"></iframe>
<iframe id="a2" src="page-to-load-second.htm"></iframe>
<iframe id="a3" src="page-to-load-third.htm"></iframe>
<script>
function pos(elem,x,y,w,h) {
   if (!elem.style) elem=document.getElementById(elem);
   elem.style.position='absolute';
   elem.style.top = y+'px';
   elem.style.left= x+'px';
   elem.style.width=w+'px';
   elem.style.height=h+'px';
}
window.onload = function() {
    window.onresize=function() {
        var w = window.innerWidth || document.documentElement.clientWidth;
        var h = window.innerHeight || document.documentElement.clientHeight;
        var w3 = w/3;
        var h2 = h/2;
        pos('a1',0,0,w3,h); /* left 1/3rd */
        pos('a2',w3,0,w3+w3,h2);
        pos('a3',w3,h2,w3+w3,h2);
    };
    window.onresize();
};
</script>

回复收藏 0 原文

梦晓ヶ微光ヅ倾城 2024-07-15 17:25:18

使用 JavaScript 构建框架本身：

<html>
<head>
<script>
function makeFrame(frameName) {
    var newFrame = document.createElement('frame');
    newFrame.id=frameName;
    if(frameName=="B") {
        newFrame.onload=function() {makeFrame("C")};
        newFrame.src = 'http://www.google.com';
    }
    else {
        newFrame.src = 'http://www.yahoo.com';
    }
    document.getElementById('A').appendChild(newFrame);

}
</script>
</head>
<frameset name='A' id='A' rows="80, *" onload="makeFrame('B')"></frameset>
</html>

Build the frames themselves using JavaScript:

<html>
<head>
<script>
function makeFrame(frameName) {
    var newFrame = document.createElement('frame');
    newFrame.id=frameName;
    if(frameName=="B") {
        newFrame.onload=function() {makeFrame("C")};
        newFrame.src = 'http://www.google.com';
    }
    else {
        newFrame.src = 'http://www.yahoo.com';
    }
    document.getElementById('A').appendChild(newFrame);

}
</script>
</head>
<frameset name='A' id='A' rows="80, *" onload="makeFrame('B')"></frameset>
</html>

回复收藏 0 原文

~没有更多了~