BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] DOM内のiFrameの状態を崩さずに移動させるには？

2022-10-22 03:01:29

質問

この簡単な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の変数とイベントをすべて失ってしまいます。

iFrameの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 が移動した後も（開始された他の変数／イベントと一緒に）残るはずです。

私の質問は次のようなものです。 JavaScriptで（jQueryの有無にかかわらず）、iFrameのウィンドウが変わらず、iFrameのイベント／変数／その他が変わらないように、DOM内のラップノード（およびそのiframeの子）を移動するにはどうしたらよいでしょうか。

どのように解決するのですか？

再読み込みせずに、iframe をドメイン内のある場所から別の場所に移動させることはできません。

ネイティブのJavaScriptを使用してもiFrameが再読み込みされることを示す例を以下に示します。 http://jsfiddle.net/pZ23B/ 

var wrap1 = document.getElementById('wrap1');
var wrap2 = document.getElementById('wrap2');
setTimeout(function(){
    document.getElementsByTagName('body')[0].appendChild(wrap1);
},10000);

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します