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

我正在做一个web应用程序，它计划允许客户端网站以以下方式在其页面上嵌入来自我的web应用程序的javascript：

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

假设我的web应用程序位于

我不能假设客户端网站上的页面有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 serverName=“localhost”；
（功能（）{
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）；
变量链接=$（''）；
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

var link=$（''）；
ReferenceError:$未定义

我怎样才能修好它？正确的方法是什么

谢谢和问候

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

Qunice提供了工作代码。要使代码完全工作，必须加载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();

})()

（函数（）{
var requestedJQuery=false；
var requestedFancyBoxJs=false；
var requestedFancyBoxCss=false；
函数requestJQuery（）{
var myScript=document.createElement（'script'）；
myScript.type='text/javascript'；
myScript.async=false；
myScript.src='1〕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；
}
函数requestFancyboxJs（）{
var myScript=document.createElement（'script'）；
myScript.type='text/javascript'；
myScript.async=false；
myScript.src='1〕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；
}
函数requestFancyboxCss（）{
link=document.createElement（'link'）；
link.setAttribute（'href'，'//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css'）；
setAttribute（'rel'，'stylesheet'）；
setAttribute（'type'，'text/css'）；
（document.getElementsByTagName（'head'）[0]| | document.getElementsByTagName（'body'[0]））.appendChild（链接）；
requestedFancyBoxCss=true；
} 
函数checkDependencies（）{
if（typeof$=='undefined'| | typeof$.fancybox==='undefined'| |！requestedFancyBoxCss）{
如果（！requestedJQuery&&typeof$==“未定义”）{
requestJQuery（）；
}
如果（！requestedFancyBoxJs&&（typeof$=='undefined'| | typeof$.fancybox=='undefined'））{
requestFancyboxJs（）；
}
如果（！requestedFancyBoxCss）{
requestFancyboxCss（）；
}           
setTimeout（函数（）{
检查依赖性（）；
}, 1);
}否则{
displayFancyBox（）；
}
}
函数displayFancyBox（）{
变量链接=$（''）；
css（'display'，'none'）；
link.attr（'href'，'http://jsfiddle.net/');
link.addClass（'fancybox fancybox.iframe'）；
link.fancybox（）；
link.trigger（'click'）；
}
检查依赖性（）；
})()

---

希望这对其他人有所帮助。

主要问题是，在未定义$或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();

})()

（函数（）{
var requestedJQuery=false；
var requestedFancyBox=false；
函数requestJQuery（）{
var myScript=document.createElement（'script'）；
myScript.type='text/javascript'；
myScript.async=false；
myScript.src='1〕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；
}
函数requestFancybox（）{
var myScript=document.createElement（'script'）；
myScript.type='text/javascript'；
myScript.async=false；
myScript.src='1〕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；
}
函数checkDependencies（）{
if（typeof$=='undefined'| | typeof$.fancybox==='undefined'）{
console.log（“无依赖项”）；
如果（！requestedJQuery&&typeof$==“未定义”）
{
R