Fatal编程技术网

动态JavaScript注入/执行

javascript dynamic

动态JavaScript注入/执行,javascript,dynamic,execution,Javascript,Dynamic,Execution,我正在尝试做的一点小概述： 1） 动态确定浏览器是否能够播放HTML5视频（正常工作） 2） 如果不能播放HTML5视频，请加载Flash版本的视频、CSS和页面（正常工作） 3） 如果能够播放HTML5视频，请加载HTML5版本的视频、CSS和页面（卡滞） 所有需要加载到浏览器中的代码（IE10、IE11和Chrome36已经过测试）。问题在于通过动态加载添加的JavaScript的执行。我正在使用Adobe Captivate CS6发布系统进行Flash和HTML5输出，如果脚本正常加载，

我正在尝试做的一点小概述：

1） 动态确定浏览器是否能够播放HTML5视频（正常工作）

2） 如果不能播放HTML5视频，请加载Flash版本的视频、CSS和页面（正常工作）

3） 如果能够播放HTML5视频，请加载HTML5版本的视频、CSS和页面（卡滞）

所有需要加载到浏览器中的代码（IE10、IE11和Chrome36已经过测试）。问题在于通过动态加载添加的JavaScript的执行。我正在使用Adobe Captivate CS6发布系统进行Flash和HTML5输出，如果脚本正常加载，但不是通过这种动态方法加载，那么我的所有自定义代码都能完美工作。为了节省一点工作量，我将发布HTML5版本的代码

        function addExternalStyleSheet(href)
        {
            if(document.createStyleSheet)
            {
                document.createStyleSheet(href);
            }
            else
            {
                var newSheet = document.createElement('link');
                newSheet.setAttribute('rel', 'stylesheet');
                newSheet.setAttribute('type', 'text/css');
                newSheet.setAttribute('href', href);
                document.getElementsByTagName('head')[0].appendChild(newSheet);
            }
        }
        function addInternalStyleSheet(selector, attributes)
        {
            if(document.createStyleSheet)
            {
                var styleSheet = document.createStyleSheet('');
                styleSheet.cssText = selector + '{' + attibutes + '}';
            }
            else
            {
                var styleTag = document.createElement('style');
                var head = document.getElementsByTagName('head')[0];
                head.appendChild(styleTag);
                var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
                if(sheet.insertRule)
                    sheet.insertRule(selector + '{' + attributes + '}', 0);
                else
                    sheet.addRule(selector, attributes, 0);
            }
        }
        function addJavaScript(src)
        {
            var newScript = document.createElement('script');
            newScript.setAttribute('type', 'text/javascript');
            newScript.setAttribute('src', src);
            document.getElementsByTagName('head')[0].appendChild(newScript);
        }
        function generateEmbed()
        {
            if(fileType == 'html5')
            {
                addExternalStyleSheet('assets/playbar/playbarStyle.css');
                addExternalStyleSheet('assets/css/CPLibrary.css');
                addExternalStyleSheet('assets/css/CPQuiz.css');
                addExternalStyleSheet('assets/css/smoothness/jquery-ui-1.8.14.custom.css');
                addExternalStyleSheet('assets/css/dd.css');
                addInternalStyleSheet('.shadow', 'overflow: hidden;');
                addInternalStyleSheet('.cpMainContainer', 'background-color: transparent; height: 100%; width: 100%; padding: 0px; position: absolute;');
                addInternalStyleSheet('.blocker', 'position: absolute; left: 0px; top: 0px; display: none;');
                addInternalStyleSheet('.loadingBackground', 'background-color: #777777; opacity: 0.5;');
                addInternalStyleSheet('.loadingString', 'color: #ffffff;');
                addJavaScript('assets/js/jquery-1.6.1.min.js');
                addJavaScript('assets/js/uncompressed.jquery.dd.js');
                addJavaScript('assets/js/uncompressed-jquery-ui-1.8.14.custom.js');
                addJavaScript('assets/js/CPRuntimeDailog.js');
                addJavaScript('assets/js/CPLibrary.js');
                addJavaScript('assets/js/CPQuizLibrary.js');
                addJavaScript('assets/js/CPPlaybar.js');
                addJavaScript('assets/js/CPTOC.js');
                addJavaScript('assets/js/CPWidgetManager.js');
                addJavaScript('assets/playbar/playbarScript.js');
                addJavaScript('Project.js');
                document.getElementById('player').innerHTML = '\n       <div class="cpMainContainer" id="cpDocument" style="left: 0px; top: 0px;">\n            <div class="shadow" id="project_container" style="left: 0px; top: 0px; position: absolute;">\n              <div id="project" class="cp-movie" style="width: 1280px; height: 720px">\n                  <div id="project_main" class="cp-timeline cp-main">\n                       <div id="div_Slide" onclick="handleClick(event)" style="top: 0px; width: 1280px; height: 720px; position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0);"><\/div>\n                  <\/div>\n                   <div id="autoplayDiv" style="display: block; text-align: center; position: absolute; left: 0px; top: 0px;">\n                       <img id="autoplayImage" src="" style="position: absolute; display: block; vertical-align: middle;" \/>\n                        <div id="playImage" tabindex="0" role="buton" aria-label="play" class="autoPlayButton" onkeydown="CPPlayButtonHandle(event)" onClick="cp.movie.play()" style="position: absolute; display: block; vertical-align: middle;"><\/div>\n                    <\/div>\n               <\/div>\n               <div id="playbar" style="left: 0px; float: left; position: absolute;"><\/div>\n             <div id="toc" style="left: 0px; float: left; position: absolute;"><\/div>\n             <div id="cc" style="left: 0px; float: left; position: absolute; visibility: hidden;">\n                 <div id="ccText" style="left: 0px; float: left; position: absolute; width: 100%; height: 100%;">\n                      <p style="margin-left: 8px; margin-right: 8px; margin-top: 2px;"><\/p>\n                    <\/div>\n                   <div id="ccClose" style="background-image: url(.\/assets\/Playbar_icons\/ccClose.png); right: 0px; float: right; position: absolute; cursor: pointer; width: 13px; height: 11px;" onclick="showHideCC()"><\/div>\n              <\/div>\n               <div id="passwordDiv" style="display: block; text-align: center; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;"><\/div>\n             <div id="expDiv" style="display: block; text-align: center; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;"><\/div>\n          <\/div>\n       <\/div>\n       <div id="blockUserInteraction" class="blocker" style="width: 100%; height: 100%;">\n            <table style="width: 100%; height: 100%; text-align: center; vertical-align: middle;" id="loading" class="loadingBackground">\n             <tr style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">\n                   <td style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">\n                       <image id="preloaderImage"><\/image>\n                      <div id="loadingString" class="loadingString">Loading...<\/div>\n                   <\/td>\n                <\/tr>\n            <\/table>\n     <\/div>\n';
                function DoCPInit()
                {
                    CPPreInit();
                    cp.QuizLibraryInit();
                    CPPostInit();
                }
                document.oncomplete = DoCPInit();
            }
        }

function addernalstylesheet（href）
{
if（document.createStyleSheet）
{
document.createStyleSheet（href）；
}
其他的
{
var newSheet=document.createElement（'link'）；
setAttribute（'rel'，'stylesheet'）；
newSheet.setAttribute（'type'，'text/css'）；
newSheet.setAttribute（'href'，href）；
document.getElementsByTagName（'head'）[0].appendChild（新闻纸）；
}
}
函数addInternalStyleSheet（选择器、属性）
{
if（document.createStyleSheet）
{
var styleSheet=document.createStyleSheet（“”）；
styleSheet.cssText=selector+'{'+attibutes+'}'；
}
其他的
{
var styleTag=document.createElement（'style'）；
var head=document.getElementsByTagName（'head'）[0]；
head.appendChild（styleTag）；
var sheet=styleTag.sheet？styleTag.sheet:styleTag.styleSheet；
if（sheet.insertRule）
insertRule（选择器+'{'+属性+'}'，0）；
其他的
sheet.addRule（选择器，属性，0）；
}
}
函数addJavaScript（src）
{
var newScript=document.createElement（'script'）；
setAttribute（'type'，'text/javascript'）；
setAttribute（'src'，src）；
document.getElementsByTagName（'head'）[0].appendChild（newScript）；
}
函数generateEmbed（）
{
如果（文件类型=='html5'）
{
addExternalStyleSheet（'assets/playbar/playbarStyle.css'）；
addExternalStyleSheet（'assets/css/CPLibrary.css'）；
addExternalStyleSheet（'assets/css/cpquick.css'）；
addExternalStyleSheet（'assets/css/smoothness/jquery-ui-1.8.14.custom.css'）；
addExternalStyleSheet（“资产/css/dd.css”）；
addInternalStyleSheet（'.shadow'，overflow:hidden；'）；
addInternalStyleSheet（'.cpMainContainer'，'背景色：透明；高度：100%；宽度：100%；填充：0px；位置：绝对；'）；
addInternalStyleSheet（'.blocker'，'位置：绝对；左侧：0px；顶部：0px；显示：无；'）；
addInternalStyleSheet（'.loadingBackground'，'背景颜色：#777777；不透明度：0.5；'）；
addInternalStyleSheet（'.loadingString'，'color:#ffffff；'）；
addJavaScript（'assets/js/jquery-1.6.1.min.js'）；
addJavaScript（'assets/js/uncompressed.jquery.dd.js'）；
addJavaScript（'assets/js/uncompressed-jquery-ui-1.8.14.custom.js'）；
addJavaScript（'assets/js/CPRuntimeDailog.js'）；
addJavaScript（'assets/js/CPLibrary.js'）；
addJavaScript（'assets/js/CPQuizLibrary.js'）；
addJavaScript（'assets/js/CPPlaybar.js'）；
addJavaScript（'assets/js/CPTOC.js'）；
addJavaScript（'assets/js/CPWidgetManager.js'）；
addJavaScript（'assets/playbar/playbarScript.js'）；
addJavaScript（'Project.js'）；
document.getElementById（'player'）.innerHTML='\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n正在加载…\n\n\n\n\n'；
函数DoCPInit（）
{
CPPreInit（）；
cp.QuizLibraryInit（）；
CPPostInit（）；
}
document.oncomplete=DoCPInit（）；
}
}
我包括了所有插入文件的功能（内部和外部CSS和JavaScript），以防出现问题，尽管我花了几个小时才让内部CSS功能正常工作，而没有禁用JavaScript功能：

在IE中使用浏览器调试器时，它会错误地执行CPPreInit函数（作为DoCPInit函数的一部分），该函数位于动态加载的第五个脚本CPLibrary.js中。调试器声明该函数未定义

老实说，我更喜欢用PHP来完成这一切，但我的手很紧，所以JavaScript必须完成这项工作，我知道它可以，我只是把事情搞砸了（

快速回答：使用中的脚本加载脚本并在加载后执行某些操作。LABJs是一个不错的选择。

我怀疑完整事件不是firi 
function resourceLoaded() {
    var ev = new Event('resourceLoaded', {bubbles: true});
    this.removeEventListener('load', resourceLoaded); // cleanup
    this.dispatchEvent(ev);
}

function loadResource(parent, tag, args) {
    var node = document.createElement(tag), arg;
    // add listeners on this line if needed
    node.addEventListener('load', resourceLoaded);
    for (arg in args) node.setAttribute(arg, args[arg]);
    parent.appendChild(node);
    return node;
}

function addJavaScript(src) {
    loadResource(
        document.head,
        {
            'type': 'text/javascript',
            'src': src
        }
    );
}

var waitfor = 1; // one script

document.addEventListener('resourceLoaded', function () {
    if (--waitfor > 0) return;
    // invoke whatever
    DoCPInit();
});

                var addJavaScript = ['assets/js/uncompressed.jquery.dd.js', 'assets/js/uncompressed-jquery-ui-1.8.14.custom.js', 'assets/js/CPRuntimeDailog.js', 'assets/js/CPLibrary.js', 'assets/js/CPQuizLibrary.js', 'assets/js/CPPlaybar.js', 'assets/js/CPTOC.js', 'assets/js/CPWidgetManager.js', 'assets/playbar/playbarScript.js', 'Project.js'];
                jQuery.each(addJavaScript, function(i, val) { jQuery.ajax({ async: false, dataType: 'script', url: val }); });