웹 프론트 엔드 개발에서 우리는 종종 iframe 컨트롤을 사용합니다.
그러나 내부 및 외부 상호 작용을 제어 할 때 각 브라우저에서 사용하는 키워드는 종종 다르므로 매우 번거 롭습니다. 서브 IFRAME에서 창 객체를 얻기 위해 각 브라우저에는 자체 사양이 있고 일부는 Windows, 일부는 ContentWindows 등이 있으며 아마도 우리가 알지 못하는 사람들이있을 수 있습니다.
그러나 Child Page에서 부모 계층 페이지에 액세스하고 원래 형식으로 모든 사람은 Window.parent입니다.
그런 다음이 기능을 통해 자식 페이지의 상위 페이지에 자신의 창 객체를 전달할 수 있으므로 부모 페이지가 하위 페이지에 쉽게 액세스 할 수 있으며 더 이상 iframe 객체에서 창 객체를 얻는 방법에 대해 걱정할 필요가 없습니다.
한마디도하지 않고 코드를 먼저 살펴 보겠습니다.
부모 페이지 코드 :
window.iframewindow = null; 함수 frameReady (subwindow) {window.iframewindow = subwindow; //과제}; <iframe src = "xx"> </iframe>하위 페이지 코드 :
$ (function () {window.parent.frameReady (창);});위의 간단한 코드를 통해 부모 페이지의 iframewindow 객체에 액세스하고 뇌가없고 매우 유용한 Child 페이지의 창 객체를 직접 가져올 수 있습니다.
여러 iframes가 있으면 어떻게해야합니까?
이 상황은 조금 더 복잡하지만 중요하지 않습니다. 위의 솔루션을 계속 사용하려고하므로 현재 상황을 분석하겠습니다.
1. 모든 하위 페이지의 창 개체를 관리하려면 iframewindows와 유사한 수집 객체가 필요합니다.
2. 각 어린이 페이지가 Parent.FramEReady를 호출하면 부모 페이지의 각 iframe에 정확하게 액세스 할 수 있도록 부모 페이지의 고유 한 이름에 의존해야합니다.
그럼 이제 간단합니다. 하위 페이지가해야 할 일은 이름, 번호 등에 지나지 않습니다. 코드를 살펴 보겠습니다.
window.subwindowname = "HelloWorldWindow"; $ (function () {wind그런 다음 부모 페이지가해야 할 일은 Refactor FrameReady 및 매개 변수를 추가하는 것입니다.
window.iframewindows = {}; // 이것은 객체 함수가됩니다. frameReady (이름, 창) {window.iframewIndows [name] = wind요약 :
이 체계로 구축 된 페이지에는 다음과 같은 장점이 있습니다.
1. 부모 페이지의 상호 작용은 부모 키워드에만 의존합니다 (이전 방식으로는 부모뿐만 아니라 ContentWindow, 창 및 기타 불확실한 키워드에도 의존합니다. 가장 중요한 것은 부모 지원이 여전히 매우 우수하다는 것입니다).
2. 통합 창 객체, 사용될 때마다 요청 된 기준 체인을 줄이고 작동 속도 향상
3. 가장 중요한 점 : 코드를 작성하기가 훨씬 쉽다는 것입니다.
위는 JavaScript iframe 상호 작용 및 편집기가 소개 한 다양한 브라우저와의 호환성에 대한 솔루션입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!