dev 기타 (Etc)

Copy iframe node (iframe node 복사하기)

2020.07.13 ·

Deep Copy node

목차

• Html
• Swallow copy
  • Javascript
  • Result
• Deep Copy
  • Javascript
  • Result

javascript를 통해서 노드를 복사해야하는 경우가 있습니다. 노드를 복사하는 방법에는 2 가지가 있는데요.

1. Swallow copy (얕은 복사)
2. Deep copy (깊은 복사)

아래와 같은 html 태그가 있다고 가정하겠습니다.

Html

<div class='iframe-container'>
  <iframe>
    document...
  </iframe>
</div>

---

Swallow copy

Javascript

var container = document.querySelector('.iframe-container');
var clonedContainer = container.CloneNode();

document.body.appendChild(clonedContainer);

Result

console.log(clonedContainer);

⬇︎

<div class="iframe-container">
  there is nothing.
</div>

---

Deep Copy

Javascript

...

var clonedContainer = container.CloneNode(true); // set true!!

...

Result

console.log(clonedContainer);

⬇︎

<div class='iframe-container'>
  <iframe>
    document...
  </iframe>
</div>

이런식으로 deep copy를 할 수 있습니다.
심지어 iframe이 가지고 있는 document 까지 복사가 되니까 다양한 상황에서 유용하게 사용할 수 있습니다.

감사합니다.