2014-11-09 1 views
0

을 임베디드 신청서는 http://example.org입니다.오류가 나는 클라이언트의 웹 사이트의 페이지라고 TEST에 다음과 같은 방법으로 내 웹 응용 프로그램에서 자바 스크립트를 삽입 할 수 있도록 계획되어 웹 응용 프로그램을하고있는 중이 야 Fancybox

jQuery와 Fancybox를 동적으로로드하고 TEST 페이지가로드 될 때 showPopup.js를 통해 Fancybox iFrame 팝업 창을 열 수 있습니다. 여기에 showPopup.js가 있습니다 :

(function() { 
    var requestedJQuery = false; 
    var requestedFancyBoxJs = false; 
    var requestedFancyBoxCss = false; 

    function requestJQuery() { 
     var myScript = document.createElement('script'); 
     myScript.type = 'text/javascript'; 
     myScript.async = false; 
     myScript.src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'; 
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body' [0])).appendChild(myScript); 
     requestedJQuery = true; 
    } 

    function requestFancyboxJs() { 
     var myScript = document.createElement('script'); 
     myScript.type = 'text/javascript'; 
     myScript.async = false; 
     myScript.src = 'http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js'; 
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body' [0])).appendChild(myScript); 
     requestedFancyBoxJs = true; 
    } 

    function requestFancyboxCss() { 
     link = document.createElement('link'); 
     link.setAttribute('href', '//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css'); 
     link.setAttribute('rel', 'stylesheet'); 
     link.setAttribute('type', 'text/css'); 
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body' [0])).appendChild(link); 
     requestedFancyBoxCss = true; 
    } 

    function checkDependancies() { 
     if (typeof $ === 'undefined' || typeof $.fancybox === 'undefined' || !requestedFancyBoxCss) { 

      if(!requestedJQuery && typeof $ === 'undefined') { 
       requestJQuery(); 
      } 

      if(!requestedFancyBoxJs && (typeof $ === 'undefined' || typeof $.fancybox === 'undefined')) { 
       requestFancyboxJs(); 
      } 

      if(!requestedFancyBoxCss) { 
       requestFancyboxCss(); 
      }   

      setTimeout(function() { 
       checkDependancies(); 
      }, 1); 

     } else { 
      displayFancyBox(); 
     } 
    } 


    function displayFancyBox() { 
     var link = $('<a>'); 
     link.css('display', 'none'); 
     link.attr('href', 'http://example.org/another_page'); 
     link.addClass('fancybox fancybox.iframe'); 
     link.fancybox(); 
     link.trigger('click'); 
    } 

    checkDependancies(); 

})() 

팝업 창 내에서이 팝업을 닫을 수있는 버튼이 있습니다. 여기에 자바 스크립트는입니다 :

Permission denied to access property 'jQuery' 

이 문제를 해결하는 방법에 대한 어떤 생각 : 버튼을 클릭하면

$('#close').click(function() { 
     parent.jQuery.fancybox.close(); 
}); 

내가 파이어 폭스에서 오류가 발생했습니다?

감사합니다.

답변

1

http://othersite.com/test.html 

경우 ... 다음 othersite.com/test.html 실제로 내부 http://example.org/another_page와 함께 iframe을 여는 ...

http://example.org/showPopup.js 

에서 응용 프로그램을로드합니다. 다음

parent.jQuery.fancybox.close() 

위의 가정이 맞다면

은, ..., http://example.org/another_page 내에서 othersite.com/test.html에 액세스 할 수 same origin policy, 따라서 오류를 위반 될 수있는 노력하고있다.

내가 볼 수있는 유일한 해결 방안은

http://othersite.com/test.html 

이 ... 없을 것 같은

Access-Control-Allow-Origin 

... HTTP 헤더 (learn more)를 설정하여 도메인에 대한 액세스를 허용해야한다는 것입니다 .

+0

JFK, 명확한 단계별 분석에 감사드립니다. – curious1

+0

@ curious1 : 문제 없음 – JFK