我正在制作一个简单的网络应用程序,我想要导航链接,而不是使用<a>
标签,更改iframe的SRC。发生这种情况时,是否有办法让旧页面“向上滑动”并快速离开iframe,然后让新页面加载?如果可能,我只想使用HTML,Javascript和CSS。更改iframe src有效?
回答
如果你想继续读书让我问你:你真的需要一个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加载新的内容;只要你不从外部域加载。
确定。这仅仅是为了个人使用,所以我并不在意跨交叉兼容性,但是看似简单的一切,只为一个隐藏的想法。谢谢! – 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
- 1. iframe src更改
- 2. 更改iframe src
- 3. 更改iframe的src
- 4. 更改具有跨域的src iframe
- 5. 用jquery更改iframe的src
- 6. 使用JavaScript更改iframe src
- 7. 通过url更改iframe src
- 8. 无法更改iframe的src
- 9. 更改IFrame src属性
- 10. 如何更改iframe src?
- 11. 如何更改iframe src
- 12. 在iframe/Javascript中更改src
- 13. 用jQuery更改YouTube iframe src
- 14. 用Javascript更改iframe src
- 15. 更改IFrame内部IFrame的SRC
- 16. 如何将iframe的src更改为iframe中的嵌入src?
- 17. 更改JavaScript不工作的iframe src
- 18. 检测使用jquery的iframe src更改
- 19. JavaScript不会正确更改iframe src
- 20. Javascript - 使用开关更改iframe src
- 21. jQuery更改iFrame的SRC和ID
- 22. 当src更改时转到iframe
- 23. JavaScript:从数组中更改iFrame src
- 24. 如何在运行时更改iframe src?
- 25. 从另一个网页更改iframe src
- 26. 更改iframe src onchange的下拉值
- 27. 从弹出窗口更改iframe的src
- 28. 用vbscript更改iframe src(打开语言)
- 29. Iframe src属性更改参数
- 30. 动态更改iframe的src内容
有一个类似的问题(在andout褪色):http://stackoverflow.com/questions/867272 – nalply 2012-04-05 18:12:04