錯誤收盤內嵌的fancybox

Question

我做一個Web應用程序，這是計劃允許客戶端的網站，從我的web應用程序在其頁面調用測試通過以下方式嵌入的JavaScript：

<script src="http://example.org/showPopup.js"></script> 

假設我的網站應用程序在http://example.org。

我可以動態加載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(); 

})() 

在彈出窗口中，我有一個按鈕來關閉此彈出窗口。下面是使用Javascript爲：

Permission denied to access property 'jQuery' 

關於如何解決此問題的任何想法：

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

我點擊該按鈕時，得到的錯誤在Firefox？

感謝和問候！

Answer 1

如果

http://othersite.com/test.html 

...裝載來自

http://example.org/showPopup.js 

您的應用程序......那麼othersite.com/test.html實際上是它內部有http://example.org/another_page打開一個iframe。

如果上述假設是正確的，那麼

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），這似乎不太可能。