Dynamically change iframe's content

问题

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

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.

  <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

回答1:

You can use the following to change the src attribute of the iFrame:

$("#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 load event (jQuery doc) to do something when the frame loads.

$("#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.

Demo

Edit: still misread it!

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

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

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

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

Updated demo showing both sliding and keeping the page after refresh.

回答2:

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.

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

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:

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 onLoad event 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().

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

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.

Demonstration

Visit this URL:

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

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

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 target attribute).

I might also suggest that you define no default src attribute inline. Rather, you could add to the onLoad handler 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.

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!

回答3:

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

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

回答4:

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.

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

Like said Michael, History API can help you.

来源：https://stackoverflow.com/questions/10953458/dynamically-change-iframes-content

标签

javascript

jquery

iframe

hyperlink

jquery-animate