상태를 잃지 않고 DOM에서 iFrame을 이동하는 방법은 무엇입니까?
다음과 같은 간단한 HTML을 보십시오.
<div id="wrap1">
<iframe id="iframe1"></iframe>
</div>
<div id="warp2">
<iframe id="iframe2"></iframe>
</div>
제가 랩을 옮기고 싶었다고 칩시다.#wrap2이전일 것입니다.#wrap1iframe이 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이 이동된 후에도 유지되어야 합니다(시작된 다른 변수/이벤트와 함께).
제 질문은 다음과 같습니다. 자바스크립트(jQuery 유무에 관계없이)를 사용하여 어떻게 DOM에서 랩 노드(및 iframe 자식)를 이동하여 iFrame의 창이 동일하고 iFrame의 이벤트/변수/등이 동일하도록 할 수 있습니까?
iframe을 다시 로드하지 않고 돔의 한 위치에서 다른 위치로 이동할 수 없습니다.
다음은 네이티브 JavaScript를 사용하더라도 iFrames가 여전히 다시 로드된다는 것을 보여주는 예입니다. http://jsfiddle.net/pZ23B/
var wrap1 = document.getElementById('wrap1');
var wrap2 = document.getElementById('wrap2');
setTimeout(function(){
document.getElementsByTagName('body')[0].appendChild(wrap1);
},10000);
이 대답은 @djechlin의 현상금과 관련이 있습니다.
w3/dom 사양에 대한 많은 검색이 있었지만 DOM 트리에서 이동하는 동안 프레임을 다시 로드해야 한다는 최종 내용을 찾지 못했습니다. 하지만 웹킷의 트랙/bugzilla/microsoft에서 수년간의 다양한 동작 변화에 대한 많은 참조와 의견을 찾았습니다.
누군가가 이 문제와 관련하여 구체적인 내용을 찾기를 바라지만, 지금은 제가 발견한 내용이 있습니다.
- 니와 료스케에 따르면 - "그것이 예상된 행동입니다."
- "마법의 iframe"(웹킷, 2010)이 있었지만 2012년에 제거되었습니다.
- MS에 따르면 - "Iframe 리소스가 DOM에서 제거될 때 해제됩니다."
appendChild(node)기존 노드의 - 즉node먼저 돔에서 제거됩니다.
여기 흥미로운 것이 있습니다.IE<=8iframe을 다시 로드하지 않았습니다. 이 동작은 (이후) 새로운 동작입니다.IE>=9). Hallvord R. M. Steen 의견에 따르면, 이것은 iframe 사양에서 인용한 것입니다.
iframe 요소가 검색 컨텍스트가 있는 문서에 삽입될 때, 사용자 에이전트는 새로운 검색 컨텍스트를 작성하고 요소의 중첩된 검색 컨텍스트를 새로 작성된 검색 컨텍스트로 설정한 다음 "처음" iframe 특성을 처리해야 합니다.
것 중 가까운 합니다).
iframe한 DOM을 하지 요로전체수행않습지다니하를의실.remove에서 라우저사경우에도는용하가를 사용하더라도node.removeChild방법)을 선택합니다.
마다 JSiframe을 합니다.따라서 제거한 후 추가하면 완전히 새로운 개체가 되고 새로 고쳐집니다.그것은 일종의 방법입니다.window.location = window.location페이지를 다시 로드합니다.
위치를 유일한 은 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠiframesCSS를 통해 전송됩니다.다음은 이 문제를 처리하는 한 가지 방법을 보여주는 예입니다.flex-box: https://jsfiddle.net/3g73sz3k/15/
기본 아이디어는 다음을 만드는 것입니다.flex-box각 iframe 래퍼의 순서 속성을 사용하여 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▁the▁to▁are▁simplify를 단순화하기 위해 방식입니다.flip '버튼을십돌오시리▁the▁so오▁button시▁rotate.iframes.
나는 이 StackOverflow 질문에서 솔루션을 얻었습니다: CSS로만 DIV 위치를 스왑합니다.
도움이 되길 바랍니다.
페이지에서 iFrame을 작성한 후 단순히 iFrame의 위치를 이동해야 하는 경우 다음 방법을 사용해 보십시오.
iFrame을 본체에 추가하고 높은 z 인덱스와 상단, 왼쪽, 너비, 높이를 사용하여 원하는 위치에 iFrame을 배치합니다.
CSS 줌도 새로고침 없이 몸에 효과가 있어 멋집니다!
저는 "위젯"을 위해 두 가지 상태를 유지하고 있으며, 이 방법을 사용하여 DOM에 제자리에 주입되거나 신체에 주입됩니다.
이 기능은 다른 콘텐츠나 라이브러리가 iFrame을 스퀴즈하거나 스퀴즈할 때 유용합니다.
쾅!
행하게도그, 불그.parentNodeHTML DOM 요소의 속성이 읽기 전용입니다.물론 iframe의 위치를 조정할 수는 있지만 DOM에서 위치를 변경하고 상태를 유지할 수는 없습니다.
좋은 테스트 베드를 제공하는 이 jsfidle을 참조하십시오.http://jsfiddle.net/RpHTj/1/
상자를 클릭하여 값을 전환합니다.Javascript를 실행하려면 "이동"을 클릭하십시오.
이 질문은 꽤 오래된 것입니다...다시 로드하지 않고 iframe을 이동할 수 있는 방법을 찾았습니다.CSS만.카메라 스트림이 있는 iframes가 여러 개 있는데, 교체할 때 다시 로드하는 것이 마음에 들지 않습니다.그래서 float, position:absolute 및 일부 더미 블록의 조합을 사용하여 다시 로드하지 않고 원하는 레이아웃(크기 조정 및 모두)으로 이동했습니다.
적어도 일부 상황에서는 슬롯이 있는 섀도돔이 옵션일 수 있습니다.
<template>
<style>div {outline:1px solid black; height:45px}</style>
<div><slot name="a" /></div>
<div><slot name="b" /></div>
</template>
<div id="shadowhost">
<iframe src="data:text/html,<button onclick='this.innerText+=`!`'>!</button>"
slot="a" height=40px ></iframe>
</div>
<button onclick="ifr.slot= (ifr.slot=='a') ? 'b' : 'a';">swap</button>
<script>
document.querySelector('#shadowhost').attachShadow({mode: 'open'}).appendChild(
document.querySelector('template').content
);
ifr=document.querySelector('iframe');
</script>iframe을 사용하여 제어하는 페이지에 액세스하는 경우 부모가 postMessage를 통해 iframe과 통신할 수 있도록 몇 가지 Javascript를 만들 수 있습니다.
여기서 iframe 내부에 로그인을 구축하여 상태 변경을 기록하고 dom을 이동하기 전에 json 개체로 요청할 수 있습니다.
일단 이동하면 iframe이 다시 로드되고, 상태 데이터를 iframe으로 전달할 수 있으며, iframe 수신을 통해 데이터를 이전 상태로 다시 구문 분석할 수 있습니다.
Paul Scoder는 올바른 해결책을 가지고 있습니다.이 목적을 위해 DOM을 조작하지 마십시오.이에 대한 고전적인 접근 방식은 상대적인 위치를 가지고 클릭 이벤트의 위치를 "뒤집는" 것입니다.클릭 이벤트를 본문에 두는 것은 현명하지 않을 뿐입니다. 왜냐하면 클릭 이벤트는 다른 요소에서도 거품이 나기 때문입니다.
$("body").click(function () {
var frame1Height = $(frame1).outerHeight(true);
var frame2Height = $(frame2).outerHeight(true);
var pos = $(frame1).css("top");
if (pos === "0px") {
$(frame1).css("top", frame2Height);
$(frame2).css("top", -frame1Height);
} else {
$(frame1).css("top", 0);
$(frame2).css("top", 0);
}
});
교차 도메인이 아닌 콘텐츠만 있는 경우 HTML을 저장하고 복원할 수 있습니다.
var htmlContent = $(frame).contents().find("html").children();
// do something
$(frame).contents().find("html").html(htmlContent);
첫 번째 방법의 장점은 프레임이 하던 일을 계속한다는 것입니다.두 번째 방법에서는 프레임이 다시 로드되고 코드가 다시 시작됩니다.
이 질문에 대한 @djechlin의 현상금에 대해, 저는 @matt-h가 올린 jsfidle을 포크했고 이것은 여전히 불가능하다는 결론에 도달했습니다.
//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);
}
언급URL : https://stackoverflow.com/questions/8318264/how-to-move-an-iframe-in-the-dom-without-losing-its-state
'programing' 카테고리의 다른 글
| CSS3 전환 이벤트 (0) | 2023.08.09 |
|---|---|
| python list 이해를 이용한 조건 기반 요소 인덱스 찾기 (0) | 2023.08.09 |
| 환경설정 활동에서 "자원에서 환경설정 추가" 대신 사용할 항목은 무엇입니까? (0) | 2023.08.09 |
| C# HashSet에 해당하는 JavaScript는 무엇입니까? (0) | 2023.08.09 |
| 'for' 루프에서 i = i + 1과 i + = 1의 차이는 무엇입니까? (0) | 2023.08.09 |