Question

我有一个iframe标签，我想使用jquery动画动态更改它。例如，iframe位于主页上，如果我单击about链接，它将加载about.html，当它准备就绪时，它将使用动画将其向下滑动。我有它的基本逻辑，但后来发生了这个

问题：

当我刷新页面时，它会加载index.html页面的内容，而我想要的是当我刷新它时，它仍保留about.html的内容。

  <a href="about.html" target="content">About</a> 
  <iframe id="content" name="content" align="top" src="index.html" 
      frameborder="0" width="100%" height="1200px" scrolling="no">
  </iframe>

这只是最基本的逻辑，但我需要帮助我如何实现刷新部分/

如果我不将它们包含在同一页面中但我仍然希望为页面转换设置动画，该怎么办？因此，当用户单击指向新页面的链接时，它将加载它，然后为其设置动画。如何实现此目的。因为最近我看到了一个jquery插件callen LocalScroll并且他们实现了这个效果，但我无法让它适用于新页面

Answer 1

您对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()。

这个功能可以做两件事。首先，它将目标内联框架指向通过url参数传递的页面。其次，它将父框架指向虚拟锚点，即使刷新页面也会保留该锚点。

因此，刷新父框架时，会抓取，解析该锚文本，并用于重新加载上次加载的内联页面。

函数clear_last_page()只是一个辅助函数，可以防止其他锚链接附加到URL。

示范

访问此网址：

http://gocontactform.com/stackoverflow/dynamically-change-iframes-content/

点击“第2页”链接查看更改。然后刷新页面。

值得注意的

请注意，此解决方案在技术上取代了锚定的正常功能。因此，如果您尝试在页面上正常使用锚链接，则可能会产生不良结果。

您必须依赖iframe_load()来查看绑定到该内联框架的任何链接，而不是您在问题中建模的内容（使用target属性进行传统链接）。

我可能还建议您在内联中定义默认的src属性。相反，您可以向onLoad处理程序添加对iframe_load('page1.html','content')的调用，这样可以防止在您使用地址中的锚定链接刷新时不必要的尝试加载默认页面。

还有其他方法可以实现您的要求。但我相信这个解决方案很容易理解和实施。

希望有所帮助！

Answer 2

您可以使用以下内容更改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，当它准备就绪时，它会向下滑动。

Demo

编辑：仍然误读它！

要保存iframe中最后显示的页面的状态，您可以使用HTML5 localStorage。

在iframe的加载事件中保存当前显示的页面。

localStorage['lastPage'] = "about.html"

然后在页面加载时使用localStorage['lastPage']将其加载回来。

Updated demo显示在刷新后滑动和保留页面。

Answer 3

不可能。刷新页面时，浏览器应该从服务器获取页面，丢弃所有JS数据。

历史API可以提供帮助，但仅适用于最新的浏览器。

Answer 4

每当页面加载时，您需要检查一些内容以了解最后加载的src iframe。默认情况下，没有浏览器可以知道这一点一种方法是在点击时更改页面的哈希值，每当页面加载时，检查是否存在此哈希并触发与哈希的链接。

我写这个：http://jsfiddle.net/estevao_lucas/revsg/4/

像迈克尔一样，历史API可以帮助你。

动态更改iframe的内容

4 个答案:

如何运作

示范

值得注意的