[英]jQuery UI effect causes iframe reload
I'm using jQuery to show / hide a div which happens to contain an iframe. 我正在使用jQuery显示/隐藏一个恰好包含iframe的div。 It works great with just standard 'show' and 'hide' methods. 它仅适用于标准的“显示”和“隐藏”方法。
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. 因此,现在我想花点时间并从jQuery UI( http://jqueryui.com/effect/ )添加一些效果,但是突然我的iframe每次显示/隐藏时都被重新加载。
Here is a fiddle to demonstrate: http://jsfiddle.net/BnZzk/1/ And here is the code since SO is forcing me to add it: 这是演示的小提琴: http : //jsfiddle.net/BnZzk/1/这是代码,因为SO迫使我添加它:
<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>
Any idea how I can keep the fancy effects but not refresh the content of my iframes? 知道如何保持精美效果但不刷新iframe的内容吗?
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! 之所以会发生这种情况,是因为这种效果重新组织了DOM,在IFRAME周围放置了DIV包装器,因此,当“重新添加” IFRAME时,就会发生重新加载! You can see this behavior using the Google Chrome elements inspector. 您可以使用Google Chrome浏览器元素检查器查看此行为。
To solve I suggest you apply the effect in a parent DIV from your IFRAME but not using the effect
plugin. 为了解决这个问题,我建议您将效果应用到IFRAME的父DIV中,但不要使用effect
插件。 Check out the http://api.jquery.com/animate/ , manipulating the width and height style properties. 查看http://api.jquery.com/animate/ ,操作宽度和高度样式属性。
As @Jamillo Santos's answer, 'reappend' issues of iFrame. 作为@Jamillo Santos的答案,“重新添加” iFrame问题。
if you are using dialog widget or its extension of jQueryUI and want to prevent this situation, just redefine _moveToTop() function of your widget implementation as below. 如果您正在使用对话框窗口小部件或其 jQueryUI 扩展 ,并且想防止这种情况,只需重新定义窗口小部件实现的_moveToTop()函数,如下所示。
_moveToTop: function() {
return null;
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.