Question

我正在做一个Web应用程序，计划允许客户端网站在其名为TEST的页面上以下列方式从我的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：

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

单击按钮时，我在Firefox中收到错误：

Permission denied to access property 'jQuery'

有关如何解决此问题的想法吗？

谢谢和问候！

Answer 1

如果

http://othersite.com/test.html

...从

加载您的应用程序

http://example.org/showPopup.js

...然后othersite.com/test.html实际上是在iframe内打开http://example.org/another_page。

如果上述假设是正确的，那么

parent.jQuery.fancybox.close()

...正试图从othersite.com/test.html内访问http://example.org/another_page，这可能违反same origin policy，因此错误。

我看到唯一可行的解决方案是

http://othersite.com/test.html

...应该允许通过设置

来访问您的域名

Access-Control-Allow-Origin

... HTTP标头（learn more），这似乎不太可能。

关闭嵌入式Fancybox时出错

1 个答案: