javascript 动态更改 iframe 的内容

Dynamically change iframe's content

提问by lomas09

I have an iframe tag and I want to dynamically change it using jquery animation. So for example the iframe sits on the home page, and if i click the about link, it will load the about.html and when its ready it will slide it down using animation. I have the basic logic for it but then came about this

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

problem:

问题：

When I refresh the page it loads back the content of the index.html page, and what I want is that when I refresh it, it still keeps the contents of 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>

this is just the most basic logic, but I need help on how do I achieve the refreshing part/

这只是最基本的逻辑，但我需要关于如何实现令人耳目一新的部分的帮助/

and what if i dont include them in the same page but I still want to animate the page transitions. so when the users clicks a link to a new page, it will load it, and then animate it.How can I achieve this. Because recently I saw a jquery plugin callen LocalScroll and they achieve this effect, but i couldnt get it to work for new pages

如果我不将它们包含在同一页面中，但我仍然想为页面转换设置动画怎么办。所以当用户点击一个新页面的链接时，它会加载它，然后动画它。我怎样才能做到这一点。因为最近我看到了一个叫 LocalScroll 的 jquery 插件，他们实现了这个效果，但我无法让它在新页面上工作

采纳答案by sachleen

You can use the following to change the srcattribute of the iFrame:

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

$("#content").attr('src', 'http://mysite.com/newpage.html');

$("#content").attr('src', 'http://mysite.com/newpage.html');

Oops, looks like I misread the question.

哎呀，看起来我误读了这个问题。

If you want to slide it down, you can bind an event handler to the loadevent (jQuery doc) to do something when the frame loads.

如果您想将其向下滑动，您可以将事件处理程序绑定到load事件 ( jQuery doc) 以在框架加载时执行某些操作。

$("#content").hide();

$("#loadLink").click(function() {
    $("#content").hide();
    $("#content").attr('src', 'http://mysite.com/newpage.html');
});

$("#content").load(function() {
    $(this).slideDown();
});

In this example, the iframe is hidden when you click the link, and when it is ready, it slides down.

在这个例子中，当你点击链接时，iframe 是隐藏的，当它准备好时，它会向下滑动。

Demo

演示

Edit: still misread it!

编辑：还是误读了！

To save the state of which page is last shown in the iframe, you can use HTML5 localStorage.

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

In the load event of the iframe save the page that it's currently showing.

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

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

and then load it back using localStorage['lastPage']on page load.

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

Updated demoshowing both sliding and keeping the page after refresh.

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

回答by Rick Buczynski

Your reference to the jQuery plugin LocalScroll is on the right track. In fact, if you could implement it properly I think it would solve your problem.

您对 jQuery 插件 LocalScroll 的引用是正确的。事实上，如果你能正确地实施它，我认为它会解决你的问题。

Anchor-based navigation, as used in this plugin, jQuery Mobile, and other places, will update the window.locationobject and also be reflected in the browser's address bar so that, when an explicit page refresh occurs, the hashed location is preserved.

在此插件、jQuery Mobile 和其他地方使用的基于锚点的导航将更新window.location对象并反映在浏览器的地址栏中，以便在发生显式页面刷新时保留散列位置。

The answer, then, is to have a script which can parse this local link from the address. Here's a generic JavaScript code block to demonstrate this:

那么，答案是有一个脚本可以从地址解析这个本地链接。这是一个通用的 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;
}

How it Works

怎么运行的

When the window onLoadevent is triggered, the URL is searched for anchor (hashed) links. If found, we will assume that this is a reference to a page and so then pass it to iframe_load().

当window onLoad事件被触发时，会在 URL 中搜索锚（散列）链接。如果找到，我们将假定这是对页面的引用，然后将其传递给iframe_load().

This function does two things. First, it points your target inline frame to the page passed via urlparameter. Second, it points the parent frame to a fictitious anchor, which will be preserved even after the page is refreshed.

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

Therefore, when you refresh the parent frame, that anchor text is grabbed, parsed, and used to re-load the last loaded inline page.

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

The function clear_last_page()is simply a helper function that prevents additional anchor links from being appended to the URL.

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

Demonstration

示范

Visit this URL:

访问此网址：

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

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

Click the link "Page 2" to see the change. Then refresh the page.

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

Noteworthy

值得注意

Be advised that this solution technically takes over the normal function of anchoring. So if you attempt to use anchor links normally on the page, you may get undesirable results.

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

You are forced to rely on iframe_load()for any links bound for that inline frame, instead of what you modeled in your question (traditional linking with a targetattribute).

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

I might also suggest that you define no default srcattribute inline. Rather, you could add to the onLoadhandler a call to iframe_load('page1.html','content')and that will prevent the unnecessary attempt to load the default page when you are refreshing with anchored links in the address.

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

There are also other ways to accomplish what you are asking. But I believe that this solution is easy to understand and implement.

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

Hope that helps!

希望有帮助！

回答by Michael Zelensky

Not possible. When you refresh a page, your browser is supposed to get the page from the server, dropping all JS data.

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

History API can help, but only for the newest browers.

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

回答by Estev?o Lucas

Whenever the page loads you need to check something to know what the last src iframe loaded. By default, no browser can know this. One way to do this is to change the hash of your page when hit the click, and whenever page loads, you check if exists this hash and trigger some link with the hash.

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

I write this: http://jsfiddle.net/estevao_lucas/revsg/4/

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

Like said Michael, History API can help you.

正如迈克尔所说，History API 可以帮助您。