如何在DOM中移动iFrame而不会丢失其状态？ [英] How to move an iFrame in the DOM without losing its state?
问题描述
看看这个简单的HTML：
Take a look at this simple HTML:
<div id="wrap1">
<iframe id="iframe1"></iframe>
</div>
<div id="warp2">
<iframe id="iframe2"></iframe>
</div>
假设我想移动包裹，以便＃wrap2 将在＃wrap1 之前。 iframe被JavaScript污染我知道jQuery的 .insertAfter（）和 .insertBefore（）。但是，当我使用它们时，iFrame会丢失所有HTML，JavaScript变量和事件。
Let's say I wanted to move the wraps so that the #wrap2 would be before the #wrap1. The iframes are polluted by JavaScript. I am aware of jQuery's .insertAfter() and .insertBefore(). However, when I use those, the iFrame loses all of its HTML, and JavaScript variables and events.
让我们说下面是iFrame的HTML：
Lets say the following was the iFrame's HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// The variable below would change on click
// This represents changes on variables after the code is loaded
// These changes should remain after the iFrame is moved
variableThatChanges = false;
$(function(){
$("body").click(function(){
variableThatChanges = true;
});
});
</script>
</head>
<body>
<div id='anything'>Illustrative Example</div>
</body>
</html>
在上面的代码中，变量 variableThatChanges 如果用户点击了身体，会改变...此变量和点击事件应保留在iFrame移动之后（以及已启动的任何其他变量/事件）。
In the above code, the variable variableThatChanges would...change if the user clicked on the body. This variable, and the click event, should remain after the iFrame is moved (along with any other variables/events that have been started)
我的问题如下： strong>使用JavaScript（有或没有jQuery），我如何可以移动DOM（及其iframe子代）中的包装节点，以使iFrame的窗口保持不变，iFrame的事件/变量/ etc保持不变？ strong>
My question is the following: with JavaScript (with or without jQuery), how can I move the wrap nodes in the DOM (and their iframe childs) so that the iFrame's window stays the same, and the iFrame's events/variables/etc stay the same?
推荐答案
无法将iframe从dom中的某个位置移动到另一个位置，而无需重新加载。
It isn't possible to move an iframe from one place in the dom to another without it reloading.
以下是一个示例，显示即使使用本机JavaScript，iFrames仍然重新加载：
http://jsfiddle.net/pZ23B/
Here is an example to show that even using native JavaScript the iFrames still reload: http://jsfiddle.net/pZ23B/
var wrap1 = document.getElementById('wrap1');
var wrap2 = document.getElementById('wrap2');
setTimeout(function(){
document.getElementsByTagName('body')[0].appendChild(wrap1);
},10000);
这篇关于如何在DOM中移动iFrame而不会丢失其状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
