Question

您好我正忙着将所有内联javascripts移动到combined.js文件中。在我的标题中，我有以下代码。我在wordpress工作。

下面的代码在我的页面上创建了一个滑块功能。我已经将javascript的大部分内容移动到了一个组合的js文件中。

<br /><br /><script>(function($){jssor_slider1_starter = function (containerId) {var jssor_slider1 = new $JssorSlider$(containerId, {$DragOrientation: 3, $ArrowNavigatorOptions: {$Class: $JssorArrowNavigator$, $ChanceToShow: 2 }}); function ScaleSlider() { var windowWidth = $JssorUtils$.$GetWindowSize(window).x; if (windowWidth) jssor_slider1.$ScaleWidth(windowWidth); else window.setTimeout(ScaleSlider, 30);}
        $Jssor$.$AddEvent(window, "load", ScaleSlider);

        $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);

};}）（jQuery的）; 滑块Javascript （函数（$）{jssor_slider1_starter（ 'slider1_container'）}）（jQuery的）;

我已经尝试将这些部分移动到Js文件中，但是不要使用document.Write将html部分写入页面，而是将html部分保留在页面中，并且希望我能得到加载custom.js后执行的JavaScript函数，这将按预期呈现html。

我已将此部分复制到combine.js文件中。

(function($){jssor_slider1_starter = function (containerId) {var jssor_slider1 = new $JssorSlider$(containerId, {$DragOrientation: 3, $ArrowNavigatorOptions: {$Class: $JssorArrowNavigator$, $ChanceToShow: 2 }}); function ScaleSlider() { var windowWidth = $JssorUtils$.$GetWindowSize(window).x; if (windowWidth) jssor_slider1.$ScaleWidth(windowWidth); else window.setTimeout(ScaleSlider, 30);}

        $Jssor$.$AddEvent(window, "load", ScaleSlider);

        $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);

};}）（jQuery的）;

以及这部分

(function($){jssor_slider1_starter('slider1_container')})(jQuery);

但我没有运气

为什么这个脚本正确内联执行的任何想法，但是当我将它包含在js文件中时，我们将不胜感激，并且任何关于如何从外部combined.js文件实现调用以使这项工作的建议将会很多理解

Answer 1

你需要首先渲染slider1_container div才能使用它，尝试将JS调用放在页脚上或包装它：

(function($){jssor_slider1_starter('slider1_container')})(jQuery);

像这样：

jQuery(document).ready(function() {
  (function($){jssor_slider1_starter('slider1_container')})(jQuery);
});

所以它在你执行JS之前等待文档准备就绪。

Answer 2

如果您在外部文件combine.js中拥有所有JS，只需使用如下脚本标记将其包含在HTML中：

<script src="<url of combine.js>" type="text/javascript" />

然后，javascript将在包含脚本标记的HTML中运行，就像您在示例中使用标记正文中的javascript代码所拥有的脚本标记一样。

N.B。您可能希望将脚本标记放在bottom of the page以获得最佳性能。

就是这样，应该工作。如果没有，请检查javascript控制台是否有错误。

将内联Javascript移动到外部组合Javascript

2 个答案: