javascript - 通过嵌入客户端网站的 Javascript 显示带有 JQuery 和 Fancybox 的弹出窗口

Question

我正在开发一个 Web 应用程序，计划允许客户端网站通过以下方式在其页面上嵌入我的 Web 应用程序中的 javascript:

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

假设我的 Web 应用程序位于 http://example.org .

我不能假设客户端网站的页面有 JQuery 和 Fancybox。所以我需要在showPopup.js中加载JQuery和Fancybox。这就是我的 showPopup.js

var serverName="localhost";
(function() {
    var myScript = document.createElement('script'); 
    myScript.type = 'text/javascript'; 
    myScript.async = false;
    myScript.src = 'http://' + serverName + '/lib/jquery/jquery-1.11.1.min.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body'[0])).appendChild(myScript);

    myScript = document.createElement('script'); 
    myScript.type = 'text/javascript'; 
    myScript.async = false;
    myScript.src = 'http://' + serverName + '/lib/jquery.fancybox/source/jquery.fancybox.pack.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body'[0])).appendChild(myScript);

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

})();

请注意，如果我在自己的应用程序的页面上使用上面的代码，它就会起作用。但是，当我在客户端网站的页面中测试上述代码时，出现此错误。

var link = $('<a>');
ReferenceError: $ is not defined

我该如何解决这个问题？这样做的正确方法是什么？

感谢和问候。

----------更新----------

Quunice 提供了工作代码。为了使代码完全正常工作，必须加载 fancybox css。基于Quince的代码，我添加了CSS部分。看起来有效。如果有什么问题请告诉我。

(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://jsfiddle.net/');
        link.addClass('fancybox fancybox.iframe');
        link.fancybox();
        link.trigger('click');
    }

    checkDependancies();

})()

希望这对其他人有帮助。

Answer 1

主要问题是，在未定义时使用 $ 或 fancybox 将导致错误并导致脚本停止。

下一个问题是脚本需要时间来下载并运行 jQuery 和 fancybox，因此我建议测试 jQuery 和 fancyBox，如果不存在，则在另一次测试之前添加超时。

您还可以使用标志，以便您只尝试获取缺少的脚本。

(function () {
    var requestedJQuery = false;
    var requestedFancyBox = 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 requestFancybox() {
        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);
        requestedFancyBox = true;
    }

    function checkDependancies() {
        if (typeof $ === 'undefined' || typeof $.fancybox === 'undefined') {
            console.log("no dependanices");            
            if(!requestedJQuery && typeof $ === 'undefined')
            {
                requestJQuery();
            }

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

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

    function displayFancyBox() {
        console.log("got dependanices");
        var link = $('<a>');
        link.css('display', 'none');
        link.attr('href', 'http://jsfiddle.net/');
        link.addClass('fancybox fancybox.iframe');
        link.fancybox();
        link.trigger('click');
    }

    checkDependancies();

})()

http://jsfiddle.net/leighking2/y9Lqtec9/