如何在 DOM 中移动 iFrame 而不丢失其状态? [英] How to move an iFrame in the DOM without losing its state?

查看：30 发布时间：2021/12/18 13:40:36 javascript jquery dom iframe

本文介绍了如何在 DOM 中移动 iFrame 而不丢失其状态?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

看看这个简单的 HTML:


<iframe id="iframe1"></iframe>
<div id="warp2"><iframe id="iframe2"></iframe>

假设我想移动换行符，以便 #wrap2 位于 #wrap1 之前.iframe 被 JavaScript 污染了.我知道 jQuery 的 .insertAfter() 和 .insertBefore().但是，当我使用它们时，iFrame 会丢失所有的 HTML、JavaScript 变量和事件.

假设以下是 iFrame 的 HTML:

<头><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">//下面的变量会在点击时改变//这代表代码加载后变量的变化//这些更改应在 iFrame 移动后保留variableThatChanges = false;$(函数(){$("body").click(function(){variableThatChanges = true;});});<身体><div id='anything'>说明性示例</div>

在上面的代码中，如果用户点击正文，变量 variableThatChanges 将...改变.此变量和点击事件应在 iFrame 移动后保留(以及已启动的任何其他变量/事件)

我的问题如下:使用 JavaScript(使用或不使用 jQuery)，如何移动 DOM(及其 iframe 子项)中的 wrap 节点，以便 iFrame 的窗口保持不变，以及 iFrame 的事件/variables/etc 保持不变?

解决方案

不可能在不重新加载的情况下将 iframe 从 dom 中的一个位置移动到另一个位置.

以下示例说明即使使用原生 JavaScript，iFrame 仍会重新加载:http://jsfiddle.net/pZ23B/

var wrap1 = document.getElementById('wrap1');var wrap2 = document.getElementById('wrap2');设置超时(功能(){document.getElementsByTagName('body')[0].appendChild(wrap1);},10000);

Take a look at this simple HTML:

<div id="wrap1">
  <iframe id="iframe1"></iframe>
</div>
<div id="warp2">
  <iframe id="iframe2"></iframe>
</div>

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.

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>

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)

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?

解决方案

It isn't possible to move an iframe from one place in the dom to another without it reloading.

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屋！

查看全文

如何在 DOM 中移动 iFrame 而不丢失其状态? [英] How to move an iFrame in the DOM without losing its state?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何在 DOM 中移动 iFrame 而不丢失其状态? [英] How to move an iFrame in the DOM without losing its state?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭