jQuery UI效果导致iframe重新加载 [英] jQuery UI effect causes iframe reload

问题描述

我正在使用jQuery显示/隐藏碰巧包含iframe的div。它只适用于标准的show和hide方法。

I'm using jQuery to show / hide a div which happens to contain an iframe. It works great with just standard 'show' and 'hide' methods.

所以现在我想得到一些幻想并从jQuery UI中添加一些效果（ http://jqueryui.com/effect/ ）但是每当我显示/隐藏它们时，我的iframe都会重新加载。

So now I want to get a little fancy and add some effects from jQuery UI (http://jqueryui.com/effect/) but suddenly my iframes are getting reloaded every time I show / hide them.

这里是一个演示的小提琴： http://jsfiddle.net/BnZzk/1/
以下是代码，因为SO迫使我添加它：

Here is a fiddle to demonstrate: http://jsfiddle.net/BnZzk/1/ And here is the code since SO is forcing me to add it:

<style>
div {
    height: 200px
}
span {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid black;
}
</style>

<div>
    <iframe src="http://www.wikipedia.org/"></iframe>
</div>
<input type="button" value="Go"/>
<hr/>
<div id="msgs"></div>

<script>
$(function () {

var container = $('div'),
    ifrm = $('iframe'),
    msgs = $('#msgs')
    delay = 10; //change me to adjust delay in seconds between actions

$('input').on('click', normal);
log('First let the iframe load and then clear your network console -- click the "Go" button to get started.');

function log (msg) {
    msgs.append('<span>' + msg + '</span>');
}

function normal () {

    ifrm.
        hide(400, function () {

            log('That was a standard hide with no effect -- is your network console still empty? OK we\'ll pause for ' + delay + ' seconds and then do a standard show.');

            ifrm.
                delay(delay * 1000).
                show(400, function () {
                    log('That was a show with no effect -- is you network console *still* empty? Great! Let\'s try some effects.');
                    log('------------------------<br/>' +
                    '-- Begin Effects --<br/>' +
                    '------------------------<br/>');
                    withEffect();
                });

        }); //hide

} //normal

function withEffect () {

    log('We\'ll pause for another ' + delay + ' seconds -- get ready to watch your network console.');

    ifrm.
        delay(delay * 1000).
        hide('fold', {mode:'hide'}, 400, function () {

            log('That was a hide with effect -- is your network console flooded? Mine too :-( We\'ll wait ' + delay + ' seconds while you clear your console again.');

            ifrm.
                delay(delay * 1000).
                show('fold', {mode:'show'}, 400, function () {
                    log('That was a show with effect -- is your network console flooded again? Bummer ...');
                });

        }); //hide

} //withEffect

});
</<script>

我知道如何保持花哨效果但不刷新我的iframe内容？

Any idea how I can keep the fancy effects but not refresh the content of my iframes?

推荐答案

这种情况正在发生，因为这个效果会重新组织DOM，在IFRAME周围放置一个DIV包装器，所以当IFRAME被重新连接时重装发生了！您可以使用Google Chrome元素检查器查看此行为。

It's happening because this effect reorganizes the DOM, putting a DIV wrapper around the IFRAME, so when the IFRAME is "reappended" the reload happens! You can see this behavior using the Google Chrome elements inspector.

要解决此问题，建议您在IFRAME的父DIV中应用效果，但不要使用效果插件。查看 http://api.jquery.com/animate/ ，操纵宽度和高度样式属性。

To solve I suggest you apply the effect in a parent DIV from your IFRAME but not using the effect plugin. Check out the http://api.jquery.com/animate/, manipulating the width and height style properties.

这篇关于jQuery UI效果导致iframe重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！