动态更改iframe的内容 [英] Dynamically change iframe's content

问题描述

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

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

问题：

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

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/

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

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

推荐答案

您可以使用以下命令更改iFrame的 src 属性：

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.

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

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();
});

在此示例中，单击链接时隐藏iframe，当它准备就绪时，它滑下来。

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

演示

编辑：仍然误读它！

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

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

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

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

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

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

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

更新了演示，显示了刷新后滑动和保留页面。

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

这篇关于动态更改iframe的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！