콜백 함수가 정의되지 않은 이유는 무엇입니까?

-1

나는 다음과 같은 페이지가 정의되어 있습니다콜백 함수가 정의되지 않은 이유는 무엇입니까?

<body> 
    <div id="container"> 
     <p> 
      <input id="myButton" type=button onclick=window.open('LandingPage.html'); value="Launch Search App"> 
     </p> 
    </div> 
    <script> 
     function cb(msg) { console.log(msg); } 
     myButton.addEventListener('click', cb); 
    </script> 
</body>

이 페이지는 보조 페이지에 대한 콜백 함수를 설정하는 책임이있다. 적어도 F12 개발자 도구에 따라 콜백 함수가 설정되어있는 것 같습니다. PointerEventPrototype이 생성 된 것을 볼 수 있습니다. PointerEventPrototype은 콜백을 설정하는 addEventListener()이 포함 된 줄을 주석 처리하면 표시되지 않습니다. 그래서 나는 지금까지 작동한다고 믿습니다. 첫 페이지에 버튼을 클릭

이

두 번째 페이지를 포함하는 다른 창을 실행, 아래 :

<body> 
    <div id="container"> 
     <p> 
      <input type=button value="Save" onclick="click_function()"> 
     </p> 
    </div> 
    <script> 
     function click_function() { 
      var message = "Save button clicked!"; 

      console.log(message); 
      cb(message); 
     } 
    </script> 
</body>

두 번째 페이지가 첫 페이지에 콜백 기능 설정에 응답하도록 구성되어있는 저장 버튼을 포함 . Save 버튼을 클릭하면 "Save button clicked!" 콘솔에 출력되지만 다음 줄 cb(message)은 cb이 정의되지 않았다고 오류를 throw합니다. 어떻게 정의되지 않습니까? 다른 구문을 사용하여 콜백 함수를 호출해야합니까?

출처

2016-08-24 DenaliHardtail

'cb()'함수가 한 페이지에 정의되어 있고 다른 페이지에서 호출하려고합니다. – Pointy

두 기능을 같은 페이지에 정의해야합니다. –

cb은 첫 번째 페이지에만 있습니다. 그들은 같은 기원에 있다면, 두 번째 페이지는 opener 글로벌, 그래서를 통해 첫 번째 페이지의 글로벌 window를 참조 할 수 있습니다 :

opener.cb(message);

만 작동하는지 cb 첫 페이지에 글로벌 때문에, 그래서 그것은 window 개체의 속성입니다.

그렇지만 web messaging을 사용하는 것이 더 깨끗한 디자인 일 수 있으며 교차 출처에서도 작동한다는 이점이 있습니다. 한 페이지 만 손을 내밀고 다른 페이지에서 기능을 호출하는 대신 웹 메시지를 사용하여 페이지에 메시지를 게시하고 메시지를 처리하도록합니다. my answer here에는 완전하고 간단한 예제가 있습니다.

출처

2016-08-24 17:41:55

콜백이 실제로 작동하는 방식에 대한 나의 이해가 잘못되었을 수 있으며 웹 메시징이 필요할 수 있습니다. 콜백을 설정할 때, 나는 미래의 시점에서 코드가 실행되고 있다고 생각했다. 이 예제에서 저장 단추는 저장 프로세스를 시뮬레이트하고 기본 페이지로 메시지를 리턴합니다. opener.cb() 접근 방식을 사용하여 다른 페이지의 한 페이지에있는 코드 만 실행했습니다. 메시지는 두 번째 페이지의 콘솔로 출력되었지만 실제로는 첫 번째 페이지로 돌아가서 해당 콘솔에 표시되지 않았습니다. 이것은 나에게 웹 메시징이 더 적합 할 것 같은 곳입니다. – DenaliHardtail

콜백 함수가 정의되지 않은 이유는 무엇입니까?

답변

관련 문제