iframe 노드 초기화

php中世界最好的语言원래의: 2018-02-06 10:20:452729검색

이번에는 iframe의 노드 초기화에 대해 알려드리겠습니다. iframe 노드 초기화의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

오늘은 갑자기 리치 텍스트 editor의 제작 원리를 복습하고 싶었습니다. 그래서 아무 말도 하지 않고 차근차근 해나가기 시작했어요. 1년 전에 간단한 리치 텍스트 편집기를 작성했기 때문에 아직도 약간의 인상이 남아 있을 것입니다. 그런데 제가 작성한 코드를 실행해보니 문제가 발견되었습니다.

var ifr = document.createElement(&#39;iframe&#39;); 
ifr.width = 300; 
ifr.height = 300; 
var idoc = ifr.contentDocument || ifr.contentWindow.document; 
idoc.designMode = &#39;on&#39;; 
idoc.contentEditable = true; 
idoc.write(&#39;<html><head><style>body{ margin:0px; }</style></head><body></body></html>&#39;); 
document.body.appendChild(ifr);

위 코드를 보세요. 혹시 실수를 발견하셨나요?
저와 비슷한 경험을 하신 유아용 신발이 없다면 아마 이 코드가 뭐가 문제인지 모르실 것 같아요. 그래서 당신은 달리는 것이 좋을 수도 있습니다. 아마도 곧 문제를 발견하게 될 것입니다.
아래에 답을 공개하겠습니다.
이 코드는 개체를 찾을 수 없다는 예외를 발생시킵니다. 어떤 개체를 찾을 수 없습니까? 문서 개체를 찾을 수 없습니다. 무엇입니까? 문서 객체를 찾을 수 없다는 것이 어떻게 가능합니까? 물론 이 문서 개체는 iframe의 문서 개체입니다. 서식 있는 텍스트를 작성한 사람이라면 누구나 iframe을 편집 가능하게 만들기 전에 먼저 iframe의 문서 객체를 얻어야 한다는 것을 알고 있습니다. 그런데 왜 문서 객체를 얻을 수 없나요? 나는 여기서 너무 허세를 부리지 않을 것이다. 내 해결 과정에 대해 이야기하겠습니다.
우선 구글에 가보니 제가 문서를 받은 방식이 맞다는 걸 알게 됐어요. 그렇다면 Chrome인지 궁금합니다. Chrome은 이 두 개체를 지원하지 않나요? 그래서 Firefox로 전환했습니다. 결과는 여전히 동일합니다. 그렇다면 확실한 것은 자신의 코드에 문제가 있다는 것입니다.
나중에 인터넷에서 코드를 비교해보니 내appendChild의 위치가 좀 틀린걸 발견해서 문서 객체를 얻기 위해 미리 옮겨두었습니다:

오늘 갑자기 의 제작 원리를 리뷰하고 싶었습니다. 리치 텍스트 편집기. 그래서 아무 말도 하지 않고 차근차근 해나가기 시작했어요. 1년 전에 간단한 리치 텍스트 편집기를 작성했기 때문에 아직도 약간의 인상이 남아 있을 것입니다. 그런데 제가 작성한 코드를 실행해보니 문제가 발견되었습니다.

var ifr = document.createElement(&#39;iframe&#39;); 
ifr.width = 300; 
ifr.height = 300; 
var idoc = ifr.contentDocument || ifr.contentWindow.document; 
idoc.designMode = &#39;on&#39;; 
idoc.contentEditable = true; 
idoc.write(&#39;<html><head><style>body{ margin:0px; }</style></head><body></body></html>&#39;); 
document.body.appendChild(ifr);

위의 코드를 보세요. 실수를 발견하셨나요?
저와 비슷한 경험을 하신 유아용 신발이 없다면 아마 이 코드가 뭐가 문제인지 모르실 것 같아요. 그래서 당신은 달리는 것이 좋을 수도 있습니다. 아마도 곧 문제를 발견하게 될 것입니다.
아래에 답을 공개하겠습니다.
이 코드는 개체를 찾을 수 없다는 예외를 발생시킵니다. 어떤 개체를 찾을 수 없습니까? 문서 개체를 찾을 수 없습니다. 무엇입니까? 문서 객체를 찾을 수 없다는 것이 어떻게 가능합니까? 물론 이 문서 개체는 iframe의 문서 개체입니다. 서식 있는 텍스트를 작성한 사람이라면 누구나 iframe을 편집 가능하게 만들기 전에 먼저 iframe의 문서 개체를 얻어야 한다는 것을 알고 있습니다. 그런데 왜 문서 객체를 얻을 수 없나요? 나는 여기서 너무 허세를 부리지 않을 것이다. 내 해결 과정에 대해 이야기하겠습니다.
우선 구글에 가보니 제가 문서를 받은 방식이 맞다는 걸 알게 됐어요. 그렇다면 Chrome인지 궁금합니다. Chrome은 이 두 개체를 지원하지 않나요? 그래서 Firefox로 전환했습니다. 결과는 여전히 동일합니다. 그렇다면 확실한 것은 자신의 코드에 문제가 있다는 것입니다.
나중에 인터넷에 있는 코드를 비교해보니 내appendChild의 위치가 좀 잘못된 걸 발견해서 문서 객체를 얻기 위해 미리 옮겨두었습니다:

var ifr = document.createElement(&#39;iframe&#39;); 
ifr.width = 300; 
ifr.height = 300; 
document.body.appendChild(ifr); 
var idoc = ifr.contentDocument || ifr.contentWindow.document; 
idoc.designMode = &#39;on&#39;; 
idoc.contentEditable = true; 
idoc.write(&#39;<html><head><style>body{ margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body></body></html>&#39;);

결과는 모든 것이 원활하게 돌아가는 것이었습니다. 그러다가 이번에는 오류를 분석해봤습니다. 사실 이 오류가 발생하는 이유는 매우 간단합니다. iframe에는 실제로 다른 문서가 포함되어 있으며 이 문서는 초기화된 후에만 문서 개체를 가질 수 있다는 것을 누구나 알고 있습니다. 그리고 iframe 요소가 DOM 트리에 추가되지 않으면 iframe의 문서가 초기화되지 않습니다. 따라서 처음의 코드에서 얻은 ifr 변수의 contentDocument 값은 null입니다. 이는 iframe의 문서가 현재 초기화되지 않았음을 의미합니다.

이 줄을 따라 다른 노드의 초기화 상태를 확인한 결과 실제로 다른 요소 노드가 생성되는 한 DOM 트리에 추가되는지 여부에 관계없이 고유한 속성과 메서드를 갖게 된다는 사실을 발견했습니다. . 즉, iframe은 많은 요소 노드 중에서 이상치입니다.

모든 일이 순조롭게 진행되었습니다. 그러다가 이번에는 오류를 분석해봤습니다. 사실 이 오류가 발생하는 이유는 매우 간단합니다. iframe에는 실제로 다른 문서가 포함되어 있으며 이 문서는 초기화된 후에만 문서 개체를 가질 수 있다는 것을 누구나 알고 있습니다. 그리고 iframe 요소가 DOM 트리에 추가되지 않으면 iframe의 문서가 초기화되지 않습니다. 따라서 처음의 코드에서 얻은 ifr 변수의 contentDocument 값은 null입니다. 이는 iframe의 문서가 현재 초기화되지 않았음을 의미합니다.

이 줄을 따라 다른 노드의 초기화 상태를 확인한 결과 실제로 다른 요소 노드가 생성되는 한 DOM 트리에 추가되는지 여부에 관계없이 고유한 속성과 메서드를 갖게 된다는 사실을 발견했습니다. 즉, iframe은 많은 요소 노드 중에서 이상치입니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!