更改iframe src有效？

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

来源

2012-04-05 tkbx

有一个类似的问题（在andout褪色）：http://stackoverflow.com/questions/867272 – nalply 2012-04-05 18:12:04

如果你想继续读书让我问你：你真的需要一个IFRAME？在网站中加载网站是你应该避免的，除非没有别的选择。速度很慢，通常会在很多浏览器上造成问题。

如果你使用这个进行导航，肯定可以用AJAX来加载新的内容吗？或者你可以先加载所有可能的内容，然后隐藏所有内容，但只有一个。顺便说一句，如果你没有太多经验（如果我受到错误的印象，我很抱歉）：不要害怕术语AJAX。它只是一个Javascript函数，它允许将数据发送到服务器，然后在加载页面后处理返回的内容。它也被称为XML HTTP请求。

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

如果你看到无可奈何：

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

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

3）将iframe滑出：使用与position:relative一起使用的容器格，其中您将iframe放置在position:absolute之内。让javascript_function()使用计时器来iframe的CSS属性top从0更改为-500（或任何高度的iframe中有）。使用jQuery特别容易实现。完成后，移除旧的iframe，并将新的iframe的z-index设置为1（以避免需要更低和更低的z-索引）。

请记住，你可以做一个<div>一模一样的，而不是为你使用AJAX加载新的内容;只要你不从外部域加载。

来源

2012-04-05 19:19:55 Armatus

确定。这仅仅是为了个人使用，所以我并不在意跨交叉兼容性，但是看似简单的一切，只为一个隐藏的想法。谢谢！ – tkbx 2012-04-05 19:43:04

想到两个选项。

如果你不使用jQuery，我建议你看看它。

1）使用面具。当用户点击链接时，遮罩将淡入页面内容（position：absolute; top：0; left：0; width：100％; height：$ windowHeight; color：＃{mask-color}）。淡入完成后，用新内容重新加载iframe。然后，淡化面具。

注：（替换效果基本show /了slideDown淡入/淡出为滑动效果，见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

来源

2012-04-05 18:14:19 Kasapo

更改iframe src有效？

回答

相关问题