javascript - 新滚动器 - 使用 javascript 替换 div 后不滚动

Question

我正在尝试创建一个 News Scroller，它可以从另一个网站获取标题。如果我像这样硬编码新元素，一切都很好:

<div id="featured" style="border-bottom: 1px solid #E1DAC0; border-top: 1px solid #E1DAC0;">
    <div class="newsitem"><div class="newsthumb">
        <a href="http://touch.nihe.gov.uk/news-newpagechristmas_spirit_breaks_down_interface_barriers">
            <img src="http://touch.nihe.gov.uk/thumbnail-xmas_market-jpg-20618-1-1-0.gif" height="63" width="87" alt="Christmas spirit breaks down interface barriers" />
        </a>
    </div>
    <h2><a href="news-newpagechristmas_spirit_breaks_down_interface_barriers" title="">Christmas spirit breaks down interface barriers</a></h2>
    <div class="newsdate">4 Nov 2014</div>
</div>
<div class="newsitem">
    <div class="newsthumb">
        <a href="http://touch.nihe.gov.uk/news-dispelling-myths-in-east-belfast">
            <img src="http://touch.nihe.gov.uk/thumbnail-east_belfast_racism_seminar_i-jpg-20587-1-1-0.gif" height="63" width="87" alt="East Belfast racism seminar" />
        </a>
    </div>
    <h2><a href="news-dispelling-myths-in-east-belfast" title="Housing Executive dealing with the myths about racism in east Belfast">Dispelling myths in East Belfast</a></h2>
    <div class="newsdate">27 Oct 2014</div>
</div>
<div class="newsitem">
    <div class="newsthumb">
        <a href="http://touch.nihe.gov.uk/news-junior-wardens-back-on-the-city-streets">
            <img src="http://touch.nihe.gov.uk/thumbnail-newbuildings_primary_school_junior_wardens-jpg-20557-1-1-0.gif" height="63" width="87" alt="Newbuildings Primary School Junior Wardens" />
        </a>
    </div>
    <h2><a href="news-junior-wardens-back-on-the-city-streets" title="Our Junior Warden project has started again in local primary schools in Derry-Londonderry. ">Junior Wardens back on the city streets</a></h2>
    <div class="newsdate">22 Oct 2014</div>
</div>
<div class="newsitem">
    <div class="newsthumb">
        <a href="http://touch.nihe.gov.uk/news-the-railway-runs-again-at-strule-and-centenary">
            <img src="http://touch.nihe.gov.uk/thumbnail-omagh_strule_train_mural-jpg-20499-1-1-0.gif" height="63" width="87" alt="Omagh Strule train mural" />
        </a>
    </div>
    <h2><a href="news-the-railway-runs-again-at-strule-and-centenary" title="Local people, events and images have been combined to create a new entrance feature at Strule Park and Centenary Park.">The railway runs again at Strule and Centenary</a></h2>
    <div class="newsdate">16 Oct 2014</div>
</div>
</div>

滚动是用这个完成的:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://touch.nihe.gov.uk/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#featured").cycle({cleartype: false, easing: 'easeInOutQuad', 
            fx: 'scrollDown', speed: 3500, speedIn: 1000, speedOut: 1000 });
    });

    window.onload = function initialLoad() {
        document.getElementById("page-inner");
        window.scrollTo(0, 1);
    }
    window.onerror = function () { return true };

当我注释掉 newitems，并使用这个 javascript 函数获取新闻项时，滚动条不起作用，四个元素一起出现:

    var pageRequest = new XMLHttpRequest();
    pageRequest.open("GET", "http://touch.nihe.gov.uk/", false);
    pageRequest.send();
    var pageSourceCode = pageRequest.responseText;
    var n = pageSourceCode.indexOf('<div id="featured">');
    var n2 = pageSourceCode.indexOf('<div id="pager"></div>');
    var extract = pageSourceCode.substring(n, n2);
    extract = extract.replaceAll('href="', 'href="http://touch.nihe.gov.uk/');
    extract = extract.replaceAll('src="', 'src="http://touch.nihe.gov.uk/');
    featured.innerHTML = extract;

新函数正确消失并获取 div id="featured"中的所有 HTML。它正确地替换了当前页面上的 div。它只是无法进行滚动。

当我使用 FireBug 通过 FireFox 运行此程序时，我在控制台上收到以下错误:跨源请求被阻止:同源策略不允许读取位于 touch.nihe.gov.uk 的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。

另一方面，在 IE 中运行时，该控制台显示此消息:[cycle] terminating;幻灯片太少: 1. 在复制新的 div 之前，它是否以某种方式获得了幻灯片的数量？

有什么想法吗？

Answer 1

您可以尝试在 XMLHttpRequest 之后重新启动循环:

var pageRequest = new XMLHttpRequest();
    pageRequest.open("GET", "http://touch.nihe.gov.uk/", false);
    pageRequest.send();
    var pageSourceCode = pageRequest.responseText;
    var n = pageSourceCode.indexOf('<div id="featured">');
    var n2 = pageSourceCode.indexOf('<div id="pager"></div>');
    var extract = pageSourceCode.substring(n+21, n2);
    extract = extract.replaceAll('href="', 'href="http://touch.nihe.gov.uk/');
    extract = extract.replaceAll('src="', 'src="http://touch.nihe.gov.uk/');
    featured.innerHTML = extract;
    $("#featured").cycle({ cleartype: false, easing: 'easeInOutQuad', fx: 'scrollDown', speed: 3500, speedIn: 1000, speedOut: 1000 });