在javascript

时间:2018-02-19 02:33:50

标签: javascript html slider jsdom

嗨专家我是一个新人,我有一个程序,在现有脚本中构建一个动态脚本

<html>
<head>
    <title>Depot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="localfiles/css/pignose.layerslider.css" rel="stylesheet" type="text/css" media="all" />
    <link href="localfiles/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="localfiles/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="localfiles/js/pagebuilder.js"></script>
</head>
<body onload="BuildHome()">
    <div id="header_content"></div>
</body>

 function BuildHome(){
var bannergrid = document.createElement("div");
    bannergrid.className = "banner-grid";
var visual = document.createElement("div");
   visual.id = "visual";
ba nnergrid.appendChild(visual);
var slide_visual = document.createElement("div");
    slide_visual.className = "slide-visual";
visual.appendChild(slide_visual);
var banner_ul = document.createElement("ul");
    banner_ul.className = "slide-group";
slide_visual.appendChild(banner_ul);    
var slide_script_pignose = document.createElement("script");
    slide_script_pignose.src="localfiles/js/pignose.layerslider.js";
    slide_script_pignose.type="text/javascript";
var slide_script = document.createElement("script");
    slide_script.type="text/javascript"; 
var slide_script_text = document.createTextNode("$(window).load(function() { $('#visual').pignoseLayerSlider({ play    : '.btn-play', pause   : '.btn-pause', next    : '.btn-next', prev    : '.btn-prev' }); });");
    slide_script.appendChild(slide_script_text);
bannergrid.appendChild(slide_script_pignose);
bannergrid.appendChild(slide_script); 
banner_ul.appendChild(slide_li);
document.getElementById("header_content").appendChild(bannergrid);}

运行时它不显示错误,但动态添加的脚本不起作用,例如:FIY:这是一个滑块图像

<div id="visual">

是动态创建的,它必须有一个也是从

动态添加的类
  

pignose.layerslider.js

它必须是这样的:

<div id="visual" class="pignose-layer">

但它没有显示课程。我需要在pignose.layerslider.js中动态添加类,因为它的功能性。 我的分析是动态添加的脚本没有工作/执行 请帮助,如果他们是一种运行/执行已添加到脚本内的脚本的方法或可以帮助的东西!

提前谢谢! 抱歉我的语言不太好用英文:)

2 个答案:

答案 0 :(得分:1)

你确定加载了jQuery吗?

尝试在<meta>代码后添加此行:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

另请参阅https://stackoverflow.com/a/13122011/5298002

也许是因为你没有将脚本添加到文件的头部。

答案 1 :(得分:1)

以下是工作代码。尝试运行它。您可以更新代码以遵循相同的模式。

您需要创建一个script元素。从此动态加载脚本的onload方法中的外部脚本触发您的方法。

var headEL = document.getElementsByTagName('head')[0];
var scriptEL = document.createElement('script');
scriptEL.type = 'text/javascript';

scriptEL.src = 'https://rawgit.com/adikari/07690f28bcbe751d0694215d83cff30f/raw/4f045b95c7b3971ef0c7bf917ef9362635cea200/hello.js';

scriptEL.onload = function() {
    sayHelloFromExternalScript();
};

headEL.appendChild(scriptEL);