상태를 잃지 않고 DOM에서 iFrame을 이동하는 방법은 무엇입니까?

Question 1

이 간단한 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 자식)의 랩 노드를 어떻게 이동할 수 있습니까? 같은?

Question 2

iframe을 다시로드하지 않고 dom의 한 위치에서 다른 위치로 이동할 수 없습니다.

다음은 네이티브 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);

Question 3

이 답변은 @djechlin의 현상금과 관련이 있습니다.

w3 / dom 사양에 대한 많은 검색과 DOM 트리에서 이동하는 동안 iframe을 다시로드해야한다고 구체적으로 말하는 최종 항목을 찾지 못했지만 웹킷의 trac / bugzilla / microsoft에서 많은 참조와 주석을 찾았습니다. 수년에 걸쳐 다른 행동 변화.

누군가가이 문제와 관련하여 구체적인 내용을 찾을 수 있기를 바라지 만 지금은 여기에 내 결과가 있습니다.

니와 료스케 에 따르면 - "그것이 예상되는 동작입니다".
"magic iframe"( 웹킷, 2010 )이 있었지만 2012 년 에 제거되었습니다 .
MS에 따르면 " iframe 리소스는 DOM에서 제거되면 해제됩니다 ". 때 appendChild(node)- 기존 노드의 node첫 번째 DOM에서 제거됩니다.
여기서 재미있는 것은 - IE<=8iframe을 다시로드하지 않았다 -이 동작 입니다 (다소) 새로운 (이후 IE>=9).
Hallvord RM Steen 의견 에 따르면 이것은 iframe 사양 에서 인용 한 것입니다.

iframe 요소가 브라우징 컨텍스트가있는 문서에 삽입되면 사용자 에이전트는 새 브라우징 컨텍스트를 생성하고 요소의 중첩 브라우징 컨텍스트를 새로 생성 된 브라우징 컨텍스트로 설정 한 다음 "처음으로 iframe 속성을 처리해야합니다. " .

이것은 내가 스펙에서 찾은 가장 가까운 것이지만 여전히 약간의 해석이 필요 iframe합니다 (DOM 에서 요소를 이동할 때 remove브라우저가 node.removeChild메서드를 사용하더라도 실제로 전체 작업을 수행하지 않기 때문에 ).

Question 4

iframe이 추가되고 src 속성이 적용될 때마다 JS를 통해 이미지 태그를 만들 때와 비슷하게로드 작업을 실행합니다. 따라서 제거하고 추가하면 완전히 새로운 엔티티이며 새로 고쳐집니다. window.location = window.location페이지를 다시로드하는 방법 입니다.

재배치하는 유일한 방법 iframes은 CSS를 이용하는 것입니다. 다음은이를 처리하는 한 가지 방법을 보여주는 예제입니다 flex-box. https://jsfiddle.net/3g73sz3k/15/

기본 아이디어는 flex-box래퍼를 만든 다음 각 iframe 래퍼의 order 속성을 사용하여 iframe의 특정 순서를 정의하는 것입니다.

<style>
  .container{
    display: flex;
    flex-direction: column;
  }
</style>
<div class="container">
  <div id="wrap1" style="order: 0" class="iframe-wrapper">
    <iframe id="iframe1" src="https://google.com"></iframe>
  </div>
  <div id="warp2" style="order: 1" class="iframe-wrapper">
    <iframe id="iframe2" src="https://bing.com"></iframe>
  </div>
</div>

JS 바이올린에서 볼 수 있듯이 이러한 order스타일은 flip버튼 을 단순화하기 위해 인라인되어 있으므로iframes .

이 StackOverflow 질문에서 해결책을 얻었습니다. DIV 위치를 CSS로만 바꿉니다 .

도움이되기를 바랍니다.

Question 5

페이지에 iFrame을 만들고 나중에 위치를 이동해야하는 경우 다음 방법을 시도해보십시오.

iFrame을 본문에 추가하고 높은 Z- 색인과 상단, 왼쪽, 너비, 높이를 사용하여 원하는 위치에 iFrame을 배치합니다.

CSS 확대 / 축소도 다시로드하지 않고도 본문에서 작동합니다.

나는 내 "위젯"에 대해 두 가지 상태를 유지하며이 방법을 사용하여 DOM 또는 본문에 삽입됩니다.

다른 콘텐츠 나 라이브러리가 iFrame을 찌그러 뜨리거나 찌그러 뜨리는 경우 유용합니다.

팔!

Question 6

불행히도 parentNode HTML DOM 요소 속성은 읽기 전용입니다. 물론 iframe의 위치를 조정할 수 있지만 DOM에서 위치를 변경하고 상태를 유지할 수는 없습니다.

좋은 테스트 베드를 제공하는이 jsfiddle을 참조하십시오. http://jsfiddle.net/RpHTj/1/

상자를 클릭하여 값을 전환하십시오. 자바 스크립트를 실행하려면 "이동"을 클릭하십시오.

Question 7

이 질문은 꽤 오래되었지만 다시로드하지 않고 iframe을 이동하는 방법을 찾았습니다. CSS 만. 카메라 스트림이있는 iframe이 여러 개 있는데 스왑 할 때 다시로드 할 때 마음에 들지 않습니다. 그래서 저는 float, position : absolute 및 일부 더미 블록의 조합을 사용하여 다시로드하지 않고 원하는 레이아웃 (크기 조정 및 모두)없이 이동했습니다.

Question 8

이 질문에 대한 현상금 @djechlin에 대한 응답으로 @ matt-h가 게시 한 jsfiddle을 포크하고 이것이 여전히 가능하지 않다는 결론에 도달했습니다.

http://jsfiddle.net/gr3wo9u6/

//this does not work, the frames reload when appended back to the DOM
function swapFrames() {
    var w1 = document.getElementById('wrap1');
    var w2 = document.getElementById('wrap2');
    var f1 = w1.querySelector('iframe');
    var f2 = w2.querySelector('iframe');

    w1.removeChild(f1);
    w2.removeChild(f2);
    w1.appendChild(f2);
    w2.appendChild(f1);
    //f1.parentNode = w2;
    //f2.parentNode = w1;

    //alert(f1.parentNode.id);
}

Question 9

iframe을 사용하여 제어하는 페이지에 액세스하는 경우 부모가 postMessage를 통해 iframe과 통신 할 수 있도록 자바 스크립트를 만들 수 있습니다.

거기에서 상태 변경을 기록하기 위해 iframe 내부에 로그인을 빌드하고 dom을 이동하기 전에 json 객체로 요청할 수 있습니다.

이동되면 iframe이 다시로드되고 상태 데이터를 iframe으로 전달할 수 있으며 iframe 수신 대기자는 데이터를 다시 이전 상태로 구문 분석 할 수 있습니다.