动态更改iframe的内容
我有一个iframe标签,我想使用jquery动画动态更改它。 因此,例如iframe位于主页上,如果我单击about链接,它将加载https://stackoverflow.com/questions/10953458/dynamically-change-iframes-content/about.html,当它准备就绪时,它将使用动画将其向下滑动。 我有它的基本逻辑,但后来发生了这个
问题:
当我刷新页面时,它会加载index.html页面的内容,而我想要的是当我刷新它时,它仍保留https://stackoverflow.com/questions/10953458/dynamically-change-iframes-content/about.html的内容。
About
这只是最基本的逻辑,但我需要帮助我如何实现更新的部分/
如果我不将它们包含在同一页面中但我仍然想要为页面过渡设置动画,该怎么办? 因此,当用户单击指向新页面的链接时,它将加载它,然后为其设置动画。如何实现此目的。 因为最近我看到了一个jquery插件callen LocalScroll并且他们实现了这个效果,但我无法让它适用于新页面
您可以使用以下命令更改iFrame的src
属性:
$("#content").attr('src', 'http://mysite.com/newpage.html');
哎呀,看起来我误解了这个问题。
如果要将其向下滑动,可以将事件处理程序绑定到load
事件( jQuery doc )以在框架加载时执行某些操作。
$("#content").hide(); $("#loadLink").click(function() { $("#content").hide(); $("#content").attr('src', 'http://mysite.com/newpage.html'); }); $("#content").load(function() { $(this).slideDown(); });
在此示例中,单击链接时隐藏了iframe,当它准备就绪时,它会向下滑动。
演示
编辑:仍然误读了!
要保存iframe中最后显示的页面的状态,可以使用HTML5 localStorage。
在iframe的load事件中保存当前显示的页面。
localStorage['lastPage'] = "about.html"
然后在页面加载时使用localStorage['lastPage']
将其加载回来。
更新的演示显示滑动和刷新后保持页面。
您对jQuery插件LocalScroll的引用是正确的。 事实上,如果你能够正确实现它,我认为它可以解决你的问题。
此插件,jQuery Mobile和其他地方使用的基于锚点的导航将更新window.location
对象,并且还会反映在浏览器的地址栏中,以便在发生显式页面刷新时保留散列位置。
那么,答案就是拥有一个可以从地址解析本地链接的脚本。 这是一个通用的JavaScript代码块来演示:
window.onload=function() { var URLParts=window.location.toString().split('#'); if(URLParts.length>1) var lastPage=decodeURI(URLParts[1]); else return false; if(lastPage) iframe_load(lastPage,'content'); } function clear_last_page(location) { var URLParts=location.split('#'); if(URLParts.length<=1) return location; URLParts.pop(); return URLParts.join('#'); } function iframe_load(url,targetID) { document.getElementById(targetID).src=url; var location=clear_last_page(window.location.toString())+'#'+url; window.location.href=location; }
这个怎么运作
触发window onLoad
事件时,将搜索URL以寻找锚(散列)链接。 如果找到,我们将假设这是对页面的引用,然后将其传递给iframe_load()
。
这个function做了两件事。 首先,它将目标内联框架指向通过url
参数传递的页面。 其次,它将父框架指向虚拟锚点,即使在刷新页面后也会保留该锚点。
因此,刷新父框架时,将抓取,解析该锚文本,并用于重新加载上次加载的内联页面。
函数clear_last_page()
只是一个辅助函数,可以防止附加的锚链接附加到URL。
示范
访问此url:
http://gocontactform.com/stackoverflow/dynamically-change-iframes-content/
单击链接“第2页”以查看更改。 然后刷新页面。
值得注意的
请注意,此解决方案在技术上取代了锚定的正常function。 因此,如果您尝试在页面上正常使用锚链接,则可能会产生不良结果。
您必须依赖iframe_load()
来获取绑定到该内联框架的任何链接,而不是您在问题中建模的内容(传统的target
属性链接)。
我可能还建议您src
联中不定义默认的src
属性。 相反,您可以向onLoad
处理程序添加对iframe_load('page1.html','content')
的调用,这将防止在您使用地址中的锚定链接刷新时不必要的尝试加载默认页面。
还有其他方法可以实现您的要求。 但我相信这个解决方案很容易理解和实施。
希望有所帮助!
不可能。 当您刷新页面时,您的浏览器应该从服务器获取页面,删除所有JS数据。
历史API可以提供帮助,但仅适用于最新的浏览器。
每当页面加载时,您需要检查一些内容以了解最后加载的src iframe。 默认情况下,没有浏览器可以知道这一点 一种方法是在点击时更改页面的哈希值,每当页面加载时,检查是否存在此哈希并触发与哈希的链接。
我写这个: http : //jsfiddle.net/estevao_lucas/revsg/4/
像Michael说的那样,History API可以帮到你。