0

我有一个 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 并且他们实现了这个效果，但我无法让它在新页面上工作

4

4 回答 4

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')，这将防止在您使用地址中的锚定链接刷新时不必要地尝试加载默认页面。

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

希望有帮助！

于 2012-06-08T18:36:29.517 回答
0

您可以使用以下内容更改srciFrame 的属性：

$("#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 的加载事件中保存它当前显示的页面。

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

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

更新的演示在刷新后显示了滑动和保持页面。

于 2012-06-08T17:36:04.403 回答
0

不可能。当您刷新页面时，您的浏览器应该从服务器获取页面，删除所有 JS 数据。

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

于 2012-06-08T17:37:47.450 回答
0

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

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

正如 Michael 所说，History API 可以帮助您。

于 2012-06-08T18:11:12.683 回答