Question

我有一个简单的小部件，想要在不同的网站上加载它。我已阅读this article并尝试使用AJAX制作解决方案 - 将响应类型设置为document。

第一眼看上去一切都好 - 加载了滑块项目，造型还可以。但滑块不会开始滚动。似乎javascript没有开始运行。 Pervious / Next按钮也不起作用。

下面的代码描述了到目前为止我尝试过的内容。

小工具 - 我使用twig进行模板化，但这并不重要。这会产生旋转木马/滑块like this。

<div class="slider-items-holder">
    <div class="control-btns">
        <ul><li><strong>Slider</strong></li>
            <li><a href="javascript:void(0)" class="prev"></a></li>
            <li><a href="javascript:void(0)" class="next"></a></li>
        </ul>
    </div>
    <div class="content-wrapper">
        <ul>
        {% for job in jobs %}
            <li>
                <div class="job-spotlight">
                    <a href="{{ job.slug }}"><h4>{{ job.title }}<span class="job-type part-time">{{ job.type }}</span></h4></a>
                    <span><a target="_blank" href="{{ job.loc_statecode }}">
                        <i class="marker"></i> {{ job.loc_state }}</a>
                    </span>
                    <span><i class="user"></i>{{ job.company }}</span>
                    <p>{{ job.detail|striptags }} ... </p>
                    <a href="{{ job.slug }}" class="button">Apply For This Job</a>
                </div>
            </li>
        {% endfor %}
        </ul>
    </div>
</div>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/script.js"></script>

JS

function fetch_jobs_widget(selector) {
  var url = "http://localhost:9874";
  var t = "/static";
  var js_template = '<script type="text/javascript" src="'+url+'/js/script.js"></script>';
  var css_template = '<link rel="stylesheet" type="text/css" href="'+url+'/css/styles.css">'
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url+t, true);

  xhr.responseType = 'document'; 
  xhr.onload = function(e) {
    container(selector).innerHTML = "";
    var doc = e.target.response;
    var widgetFragment = document.createDocumentFragment();

    widgetFragment.appendChild(doc.querySelector(".my-slider")); 

    container(selector).appendChild(widgetFragment);
    container(selector).innerHTML += css_template;
    container(selector).innerHTML += js_template; 

  }

  xhr.send();
}

HTML - 我想在该页面上使用该小部件。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<div class="textwidget jobs-plugin-carousel">
</div>
<script type="text/javascript" src="widgets.js"></script>
<script type="text/javascript">fetch_jobs_widget('.textwidget');</script>
</body>
</html>

我也尝试过立即加载HTML / CSS / JS，但我得出了相同的结果。

更新

滑块的JS代码

//script.js
(function () {
        var mySlider, cWrapper, ul, li;
        var current = 0;
        var timeOut = 3000;
        var intervalHandler;
        var automaticStart = true;

        init();

        function init() {
            mySlider = document.querySelector(".my-slider");
            cWrapper = document.querySelector(".my-slider > .content-wrapper");
            ul = document.getElementById("slider-items-holder");
            li = ul.querySelectorAll("li");

            if (!mySlider || !cWrapper || !ul || !li.length)
                return;

            ul.style.width = cWrapper.offsetWidth * li.length;
            ul.style.height = cWrapper.offsetHeight;

            bindEvents();
            startSlider();
        }

        function startSlider() {
            if (automaticStart)
                intervalHandler = setInterval(next, timeOut);
        }

        function next() {
            if (current + 1 >= li.length) {
                current = -1;
            }

            ul.style.marginLeft = '-' + (li[0].offsetWidth * ++current);
        }

        function prev() {
            if (current - 1 < 0) {
                current = li.length;
            }

            ul.style.marginLeft = '-' + (li[0].offsetWidth * --current);
        }

        function bindEvents() {
            mySlider.addEventListener('mouseover', function () {
                clearInterval(intervalHandler);
            });

            mySlider.addEventListener('mouseout', startSlider);

            var prevBtn = document.querySelector(".my-slider > .control-btns a.prev");
            var nextBtn = document.querySelector(".my-slider > .control-btns a.next");
            if (prevBtn)
                prevBtn.addEventListener('click', prev);

            if (nextBtn)
                nextBtn.addEventListener('click', next);
        }
    })();

Answer 1

当我看到你的滑块时，我发现你有这条线

ul = document.getElementById("slider-items-holder");

试图找到一个带有ID＆＃34; slider-items-holder＆＃34;的元素。但是在你的滑块模板中，你没有ul元素的id。所以将此id添加到您的第二个ul元素。

修改

动态添加JavaScript文件的方式是错误的。您需要将脚本标记添加到html页面，如此

var myScript= document.createElement('script');
  myScript.type = 'text/javascript';
  myScript.src = 'http://localhost:9874/js/script.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(myScript);

从远程站点加载html模板

1 个答案: