我正在使用 jQuery 来显示/隐藏恰好包含 iframe 的 div。它仅适用于标准的“显示”和“隐藏”方法。
所以现在我想变得有点花哨并从 jQuery UI ( http://jqueryui.com/effect/ ) 添加一些效果，但突然我的 iframe 每次显示/隐藏它们时都会重新加载。
这里有一个 fiddle 来演示: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>
知道如何保持漂亮的效果但不刷新 iframe 的内容吗？
最佳答案
它的发生是因为这种效果重组了 DOM，在 IFRAME 周围放置了一个 DIV 包装器，所以当 IFRAME 被“重新附加”时，就会发生重新加载!您可以使用 Google Chrome 元素检查器查看此行为。
要解决这个问题，我建议您在 IFRAME 的父 DIV 中应用效果，但不要使用 effect 插件。查看http://api.jquery.com/animate/ , 操纵宽度和高度样式属性。
关于javascript - jQuery UI 效果导致 iframe 重新加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14864821/