Question

我正在制作一个简单的网络应用，我希望有一个导航链接，而不是使用<a>标记，更改iframe的SRC。当发生这种情况时，是否有办法让旧页面向上滑动＆＃34;并快速退出iframe，然后让新页面加载？如果可能，我只想使用HTML，Javascript和CSS。

Answer 1

在你继续阅读之前，让我问你：你真的需要一个iframe吗？除非没有其他选择，否则您应该避免在网站上加载网站。它很慢，通常会在浏览器中造成很多问题。

如果您使用它进行导航，肯定可以使用AJAX来加载新内容吗？或者你可以最初加载所有可能的内容并隐藏所有内容，但只有一个。

顺便说一下，如果你还没有太多的经验（如果我有错误的印象，我道歉）：不要害怕AJAX一词。它只是一个Javascript函数，它允许在加载页面后将数据发送到服务器然后处理它返回的任何内容。它也称为XML HTTP请求。

在任何情况下，jQuery框架（如jQuery（http://jquery.com）或原型（http://prototypejs.org/））都可以让您的工作变得更轻松。

如果你别无选择：

1）执行JS的链接很简单：例如<a href="#" onclick="return own_javascript_function();">或<a href="javascript:my_function()">。

2）让您的函数使用新内容（var newframe = new HTMLIFrameElement()然后设置src等）创建新的iframe，并将其插入到上一个iframe下方。给它一个较低的z-index将它隐藏在另一个之下。

3）滑出iframe：使用position:relative的容器div，在其中放置iframe position:absolute。让javascript_function()使用计时器将iframe的css-property top从0更改为-500（或iframe所具有的任何高度）。使用jQuery特别容易实现。完成后，删除旧的iframe并将新的iframe的z-index设置为1（以避免需要更低和更低的z-indices）。

请记住，您可以使用<div>执行完全相同的操作，而不是使用ajax加载新内容;只要你没有从外部域加载。

Answer 2

有两种选择。

如果您不使用jQuery，我建议您调查一下。

1）使用面膜。当用户单击链接时，掩码将淡入页面内容（位置：绝对;顶部：0;左：0;宽度：100％;高度：$ windowHeight;颜色：＃{mask-color}）。淡入完成后，使用新内容重新加载iframe。然后，将面具淡出。

注意:(用slideUp / slideDown替换fadeIn / fadeOut以获得幻灯片效果，请参阅jquery效果：http://api.jquery.com/category/effects/）

淡出：

$('#elemendId').fadeOut();

淡入：

$('#elemendId').fadeOut();

我认为默认的淡入淡出时间是500，因此您需要为加载页面的代码设置超时

setTimeout(function() { ... load new iframe ... }, 500)

2）抛弃iFrame并对内容进行AJAX请求。

之类的东西

$.post('path/to/file.html', function(data) {
 $('#destination-div').html(data)
});

方式更容易，你可能不会遇到很多问题。

编辑：我实际上不确定方法＃1是否有效...我忘了你是否可以在iframe上放一个掩码

改变iframe src有效吗？

2 个答案: