javascript - 更改 iframe src 的效果？

Question

我正在制作一个简单的网络应用程序，我想要导航链接，而不是使用<a>标签，而是更改 iframe 的 SRC。发生这种情况时，有没有办法让旧页面“向上滑动”并快速滑出 iframe，然后让新页面加载？如果可能的话，我只想使用 HTML、Javascript 和 CSS。

Answer 1

在您继续阅读之前，让我问您：您真的需要 iframe 吗？除非确实别无选择，否则您应该避免在网站中加载网站。它很慢，通常会导致跨浏览器出现很多问题。

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

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

在任何情况下，诸如 jQuery (http://jquery.com) 或原型 (http://prototypejs.org/) 之类的 Javascript 框架应该会让您的工作变得更轻松。

如果您没有其他选择：

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

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

3) 将 iframe 滑出：使用容器 divposition:relative将 iframe 与position:absolute. 让我们javascript_function()使用计时器将 iframe 的 css 属性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 上放置一个遮罩