부모 페이지에서 iframe 내의 JavaScript 코드 호출

sourcecode

부모 페이지에서 iframe 내의 JavaScript 코드 호출

copyscript 2022. 10. 27. 22:24

부모 페이지에서 iframe 내의 JavaScript 코드 호출

으로는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★.iframe embedded embedded embedded embedded embedded embedded embedded embedded embedded embedded embedded embedded embedded embedded embedded embedded embedded embedded 。iframe에는 상위 페이지에서 호출해야 하는 JavaScript 루틴이 있습니다.

그 는 아주 요. '아까만'이라고 요.parent.functionName()하지만 불행하게도, 나는 그것과 정반대의 것이 필요하다.

이 문제는, 의 소스 URL 를 변경하지 않는 것에 주의해 주세요.iframe 에 되어 있는 를 호출합니다.iframe.

가 iFrame ID "targetFrame"이라고 합니다.targetFunction():

document.getElementById('targetFrame').contentWindow.targetFunction();

하려면 , 라고 하는 방법도 .window.framesdocument.getElementById.

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction();

여기엔 알아둬야 할 몇 가지 별난 것들이 있다.

HTMLIFrameElement.contentWindow아마 더 쉬운 방법일 것입니다만, 표준적인 속성은 아니고, 일부 브라우저는 지원하지 않습니다.이치노은, 1에서는, 「DOM」의 「1 HTML」에 하지 않기 입니다.window★★★★★★ 。
도 한번 수 있습니다.HTMLIFrameElement.contentDocument.defaultView일부 오래된 브라우저에서는 허용되지만 IE에서는 허용되지 않습니다.에서는 ',먹다,먹다,먹다'라고되어 있지 않습니다.window오브젝트는 (1)과 같은 이유로 되돌리지만, 필요에 따라 여기에서 몇 가지 추가 브라우저 버전을 선택할 수 있습니다.
window.frames['name']창을 반환하는 것은 가장 오래된 인터페이스이기 때문에 가장 신뢰할 수 있는 인터페이스입니다. 그 에는 ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ.name="..."이름별로 프레임을 얻을 수 있는 속성입니다.이것은 약간 보기 흉합니다. ~~권장되지 않다~~ /이행.(id="..."「IE」를 참조해 주세요).
window.frames[number]신뢰성이 매우 높지만 적절한 지수를 아는 것이 중요합니다.예를 들어 페이지에 iframe이 하나밖에 없다는 것을 알고 있다면 이 문제를 해결할 수 있습니다.
아이가 아직 로드되지 않았거나 다른 문제가 발생하여 액세스할 수 없는 경우 완전히 가능성이 있습니다.더수, 의 아이프레임을 알립니다.window.parent스크립트는 로드가 완료되어 다시 호출할 준비가 되면 실행됩니다.자신의 오브젝트 중 하나(콜백 함수 등)를 부모 스크립트에 전달함으로써 부모 스크립트는 어떤 HTMLIFrameElement와 관련되어 있는지에 대해 걱정할 필요 없이 iframe 내의 스크립트와 직접 통신할 수 있습니다.

를 JS에서 합니다.iframe는 가능합니다, 가 모두 로딩되어 있는 합니다.iframe같은 도메인에서 왔습니다. example.com다 의전을 둘 다 을 사용하고 있습니다.http:// ★★★★★★★★★★★★★★★★★」https://.

다음의 경우는, 콜이 실패합니다.

부모 페이지와 iframe 페이지는 다른 도메인에서 왔습니다.
은 서로 프로토콜을 , https://에는 https에 있습니다. http://는 addate https://는 addate 입니다.

이 제한에 대한 회피책은 매우 안전하지 않습니다.

해 보자.superwinningcontest.example사람들의 이메일에 대한 링크를 보냈습니다.때, 몇 수 있었습니다.iframe거기서 Facebook의 피드를 읽어, 최근의 Amazon이나 PayPal의 거래를 확인하거나, 충분한 시큐러티를 실장하지 않은 서비스를 사용하고 있는 경우는, 어카운트로부터 송금을 실시합니다.그렇기 때문에 JavaScript는 동일 도메인 및 동일 프로토콜로 제한됩니다.

IFRAME에서 함수를 window 객체에 공개합니다.

window.myFunction = function(args) {
   doStuff();
}

상위 페이지에서 액세스하려면 다음을 사용합니다.

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

iFrame의 타깃과 포함된 문서가 다른 도메인에 있는 경우 이전에 게시된 메서드는 작동하지 않을 수 있지만 다음과 같은 해결책이 있습니다.

예를 들어 문서 A에 문서 B를 포함하는 iframe 요소가 포함되어 있고 문서 A의 스크립트가 문서 B의 Window 오브젝트에서 postMessage()를 호출하는 경우 해당 오브젝트에서 메시지이벤트가 시작되고 문서 A의 Window에서 발신된 것으로 표시됩니다.문서 A의 스크립트는 다음과 같습니다.

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

착신 이벤트의 이벤트핸들러를 등록하려면 , 스크립트는 addEventListener()(또는 같은 메카니즘)를 사용합니다.예를 들어 문서 B의 스크립트는 다음과 같습니다.

window.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}

이 스크립트는 먼저 도메인이 예상 도메인인지 확인한 후 메시지를 보고 사용자에게 표시하거나 메시지를 보낸 문서에 메시지를 다시 보내 응답합니다.

http://dev.w3.org/html5/postmsg/ #web-timeout 경유

이러한 답변 중 일부는 CORS 문제를 다루지 않거나 통신을 가능하게 하기 위해 코드 스니펫을 어디에 배치했는지 밝히지 않습니다.

여기 구체적인 예가 있다.예를 들어 상위 페이지의 버튼을 클릭하여 iframe 내에서 작업을 수행합니다.내가 할 수 있는 방법은 이렇다.

parent_frame.displaces

<button id='parent_page_button' onclick='call_button_inside_frame()'></button>

function call_button_inside_frame() {
   document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}

iframe_page.syslog

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
    {
      if(event) {
        click_button_inside_frame();
    }
}

function click_button_inside_frame() {
   document.getElementById('frame_button').click();
}

다른 방향으로 이동하려면(iframe inside 버튼을 클릭하여 iframe outside iframe 메서드를 호출합니다) 코드 스니펫이 존재하는 곳을 전환하고 이를 변경합니다.

document.getElementById('my_iframe').contentWindow.postMessage('foo','*');

다음과 같이 입력합니다.

window.parent.postMessage('foo','*')

참고로 오늘 같은 문제가 있었습니다만, 이번에는 페이지가 iframe이 아닌 오브젝트에 포함되어 있었습니다(XHTML 1.1 문서이기 때문에).오브젝트에 대한 동작은 다음과 같습니다.

document
  .getElementById('targetFrame')
  .contentDocument
  .defaultView
  .targetFunction();

(한 줄에 들어가지 않아 줄 바꿈이 심해서 미안해)

Quirksmode가 여기에 글을 올렸어.

페이지가 파손되어 archive.org에서만 액세스 할 수 있게 되었기 때문에, 여기서 재현했습니다.

IF 프레임

이 페이지에서는 iframe에 접속하는 방법에 대해 간략하게 설명합니다.당연히 브라우저에 고려해야 할 사항이 몇 가지 있습니다.

iframe은 인라인프레임으로 독자적인 URL을 가진 완전히 다른 페이지를 포함하면서도 다른 HTML 페이지 내에 배치되는 프레임입니다.이것은 웹 디자인에서 매우 좋은 가능성을 제공한다.문제는 iframe에 접속하여 새로운 페이지를 로드하는 것입니다.이 페이지에서는 그 방법에 대해 설명합니다.

프레임 또는 객체?

기본적인 질문은 iframe이 프레임으로 표시되는지 오브젝트로 표시되는지 여부입니다.

프레임 소개 페이지에서 설명한 바와 같이 프레임을 사용하면 브라우저에 의해 프레임 계층이 생성됩니다().top.frames[1].frames[2]은 이한가?iframe은 이 프레임 계층에 적합한가?
아니면 브라우저는 iframe을 다른 오브젝트, 즉 우연히 src 속성을 가진 오브젝트로 인식합니까?이 경우 표준 DOM 콜을 사용해야 합니다(예:document.getElementById('theiframe'))을 사용하다일반 브라우저에서는 '실제' iframe(하드 코드)에 대한 두 가지 보기를 모두 허용하지만 생성된 iframe은 프레임으로 액세스할 수 없습니다.

NAME 속성

에 iframe을 입니다.nameAtribute를 하는 Atribute를 할 수 .id.

<iframe src="iframe_page1.html"
    id="testiframe"
    name="testiframe"></iframe>

에는 ""가 합니다.name계층의 속성.iframe을 합니다. 브라우저Mozilla)에서는 "Mozilla"가 합니다.에서는id 할 수 있도록 .iframe 오 、 iframe 。양쪽 속성을 iframe에 할당하면 옵션이 열린 상태로 유지됩니다. ★★★★★★★★★★★★★★★★★.name 훨씬 더 id.

접근

해, iframe 의 iframe 을 합니다.src iframe을 합니다.location.href.

document.getElementById('iframe_id').src = '새 페이지'html'; frames['iframe_name'].위치.href = '새 페이지'html'; Opera 6에서는 프레임 구문이 지원되지만 오브젝트 구문은 지원되지 않으므로 프레임 구문이 약간 권장됩니다.

iframe 접근

따라서 완전한 크로스 브라우저 경험을 위해서는 iframe에 이름을 붙이고

frames['testiframe'].location.href

구문이야. 내가 아는 한 이건 항상 효과가 있어.

문서 접근

에의 액세스는, iframe 를 , 매우.name기여하다.iframe 내의 문서 내 링크 수를 카운트하려면 를 수행합니다.

생성된 iframe

W3C DOM 경유로 iframe을 생성해도 iframe은 즉시 에 입력되지 않습니다.frames array 및 " " " 입니다.frames['testiframe'].location.href구문은 바로 작동하지 않습니다.브라우저는 iframe이 어레이에 표시될 때까지 약간의 시간이 필요합니다.이 시간 동안 스크립트를 실행할 수 없습니다.

document.getElementById('testiframe').src구문은 모든 상황에서 정상적으로 동작합니다.

target에 "iframe동작하지 (Opera에서는 하지 않습니다.name ★★★id.

의 .targetsupport는 생성된 iframe의 내용을 변경하려면 JavaScript를 사용해야 한다는 것을 의미하지만, 처음부터 생성하기 위해서는 JavaScript가 필요하기 때문에 크게 문제가 되지 않습니다.

iframe의 텍스트 크기

탐색기 6 전용 버그:

보기 메뉴를 통해 텍스트 크기를 변경하면 iframe의 텍스트 크기가 올바르게 변경됩니다.그러나 이 브라우저는 원본 텍스트의 줄 바꿈을 변경하지 않으므로 텍스트의 일부가 표시되지 않거나 줄이 다른 단어를 포함할 때 줄 바꿈이 발생할 수 있습니다.

은 IFRAME에 .frames[]하다, 사용하다, 사용하다, 사용하다, 사용하다, 사용하다, 사용하다, 사용하다, 사용하다, 사용하다, 사용하다, 사용하다, 사용하다, 사용하다

frames['iframeid'].method();

꽤 우아한 해결책을 찾았어요.

말씀하신 대로 상위 문서에 있는 코드를 실행하는 것은 매우 쉽습니다.그리고 그게 내 코드의 기본이고, 정반대로 행동해.

iframe이 로드되면 상위 문서에 있는 함수를 호출하고, 인수로서 iframe 문서에 있는 로컬 함수에 대한 참조를 전달합니다.이제 상위 문서는 이 참조를 통해 iframe의 기능에 직접 액세스할 수 있습니다.

예:

부모:

function tunnel(fn) {
    fn();
}

iframe:

var myFunction = function() {
    alert("This work!");
}

parent.tunnel(myFunction);

iframe이 로드되면 parent.tunnel(YourFunctionReference)을 호출하여 파라미터로 수신한 함수를 실행합니다.

다양한 브라우저의 모든 비표준 메서드를 처리할 필요 없이 단순합니다.

계속해서 JoelAnair의 답변:

견고성을 높이기 위해 다음과 같이 사용합니다.

var el = document.getElementById('targetFrame');

if(el.contentWindow)
{
   el.contentWindow.targetFunction();
}
else if(el.contentDocument)
{
   el.contentDocument.targetFunction();
}

매력있는 일을 하고 싶다 :)

다른 함수(섀도박스 또는 라이트박스)에 의해 생성된 iframe에서 부모(Parent)의 JavaScript 함수를 호출하는 경우.

을 해 보세요.window" " " " " : "

window.parent.targetFunction();

니틴 반살의 대답 따르기

한층 더 견고함을 추구합니다.

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

그리고.

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.targetFunction();
  ...
}
...

       $("#myframe").load(function() {
            alert("loaded");
        });

동일하지만 조금 더 쉬운 방법은 iframe 내의 페이지에서 상위 페이지를 새로 고치는 방법입니다.상위 페이지의 함수를 호출하여 javascript 함수를 호출하여 페이지를 다시 로드합니다.

window.location.reload();

또는 iframe 페이지에서 직접 이 작업을 수행합니다.

window.parent.location.reload();

둘 다 효과가 있어요.

해 봐.parent.myfunction()

상위 페이지에서 프레임의 함수를 호출하려면 다음을 사용합니다.

parent.document.getElementById('frameid').contentWindow.somefunction()

언급URL : https://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page

'sourcecode' 카테고리의 다른 글

PHP에서 주의 메시지 제거 (0)	2022.10.27
텐서플로우의 tf.nn.max_pool의 'SAME' 패딩과 'VALID' 패딩의 차이점은 무엇입니까? (0)	2022.10.27
Android Recycleer View 스크롤 성능 (0)	2022.10.27
Java에서 URL 또는 URI를 구성하는 관용적인 방법은 무엇입니까? (0)	2022.10.27
"pip install --user..."의 목적은 무엇입니까? (0)	2022.10.27

현재글부모 페이지에서 iframe 내의 JavaScript 코드 호출

각종 프로그래밍 정보를 다루는 블로그입니다.

angularjs, JavaScript, mongoDB, MySQL, reactjs, Java, JSON, MariaDB, Spring-Boot, WordPress, Powershell, Git, C, jquery, oracle, vuejs2, php, vuex, Ajax, Python,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

copyscript

부모 페이지에서 iframe 내의 JavaScript 코드 호출

부모 페이지에서 iframe 내의 JavaScript 코드 호출

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

티스토리툴바

부모 페이지에서 iframe 내의 JavaScript 코드 호출

부모 페이지에서 iframe 내의 JavaScript 코드 호출

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

관련글

티스토리툴바