Question

我正在尝试在一个页面上加载2个脚本（或更多），并且只有第一个脚本正在运行。我无权编辑javascript，因此无法对其进行更改。

以下是代码：

<div style="z-index:0; min-height:600px;">
    <script language="javascript" src="http://tickettransaction.com/?bid=1202&amp;sitenumber=0&amp;tid=ticket_results2&amp;evtid=2175269"></script>
    <noscript></noscript>
</div>
<div style="z-index:0; min-height:600px;">
    <script language="javascript" src="http://tickettransaction.com/?bid=1202&amp;sitenumber=0&amp;tid=ticket_results2&amp;evtid=2175270"></script>
    <noscript></noscript>
</div>

当我运行页面时，第一个加载正常，但第二个加载不正常。非常感谢任何帮助。

Jsfiddle链接：

不工作：http://jsfiddle.net/6E6ZC/

单独工作1：http://jsfiddle.net/5LZ8d/

单独工作2：http://jsfiddle.net/SQ778/

Answer 1

不要删除CACHE。

正在发生的事情是浏览器认为它被要求在每个请求上检索相同的文件。

我遇到了同样的问题，以下是解决问题的方法。

像我一样添加一个查询字符串参数。我添加了'&t='+ new Date().getTime()

'/api/drawings?a=e&f=img&id=' + eID + '&t=' + new Date().getTime()

将像冠军一样工作！

这是一种动态添加脚本到页面的方法，这是一种肯定会工作的方式。

<script type="text/javascript">

         setTimeout(function () {

        var script1 = document.createElement('script'),
            script2 = document.createElement('script');

        script1.setAttribute('type', 'text/javascript');
        script1.setAttribute('id', 'script1');
        script1.setAttribute('src', 'http://tickettransaction.com/?bid=1202&sitenumber=0&tid=ticket_results2&evtid=2175269&t=' + new Date().getTime());

        script1.setAttribute('type', 'text/javascript');
        script1.setAttribute('id', 'script2');
        script1.setAttribute('src', 'http://tickettransaction.com/?bid=1202&sitenumber=0&tid=ticket_results2&evtid=2175269&t=' + new Date().getTime());

        document.getElementsByTagName("head")[0].appendChild(script1);
        document.getElementsByTagName("head")[0].appendChild(script2);

            },500);

</script>

**使用上面的脚本，您不必静态添加脚本。只需让我提供的脚本运行。

这是假设您没有尝试在每个文件中加载两个具有相同精确脚本的JS文件。如果您尝试不断检查更改，则只需要一个文件和一个间隔。 “setInterval（function（）{//这将是完全不同的东西，还有更多工作}）”

Answer 2

您可能遇到缓存问题。尝试在JavaScript上设置标题，以便它不允许浏览器缓存。

Answer 3

没有缓存问题，两个脚本都正确加载了http 200状态消息。当单独使用时，它们会产生结果，但是当它们一起使用时，第二个不会产生任何结果。

这可能会发生，因为第二个脚本需要页面中可以放置其内容的内容，但它并没有发现它被第一个脚本删除了。这在我看来是最可能的原因。

实施例： http://jsfiddle.net/6E6ZC/

<div style="z-index:0; min-height:600px;">
    <script language="javascript" src="http://tickettransaction.com/?bid=1202&amp;sitenumber=0&amp;tid=ticket_results2&amp;evtid=2175269"></script>
    <noscript></noscript>
</div>
<div style="z-index:0; min-height:600px;">
    <script language="javascript" src="http://tickettransaction.com/?bid=1202&amp;sitenumber=0&amp;tid=ticket_results2&amp;evtid=2175270"></script>
    <noscript></noscript>
</div>

Answer 4

好的，在看到这么多错误的转弯后，我觉得有必要回答这个问题。

缓存与否是非问题。即使浏览器确实缓存了请求（并且很可能，因为URL完全相同），这一切都取决于加载的代码应该做什么。

除非代码动态更改其功能和/或变量的名称或其他非常智能的东西，包括基本相同的代码第二次很可能会覆盖第一个副本，因此除了文件之外什么都不做只包括一次。

如果http://tickettransaction.com的人确实设计了一个依赖于用户在URL尾部添加一些随机垃圾的接口，以便在同一页面上再次执行相同的请求结果，我会感到非常惊讶

他们是否想要支持这种用法，他们只需在其响应标头中添加cache-control: no-cache或等效指令。

但毕竟，我在程序员的生活中看到过最奇怪的事情也许tickettransaction.com的那个人在他编码那个或那个什么的时候严重陷入困境？

要摆脱此缓存错误问题，只需打开您的开发工具并观察网络流量。您很可能会看到请求从缓存中被提取两次（或者从服务器获取一次，如果按Ctrl + F5则从缓存中获取一次）。

如果您确实希望从服务器获取两次请求，只需禁用缓存，并确保两次完整的服务器传输。

跳过所有这些箍，你很可能会看到相同的结果，即第二个响应代码覆盖了第一个。

上次更新。

为了摆脱这个缓存非问题，我在URL中添加了一个变量参数我使用了开发工具来确保浏览器没有缓存第二个请求。

一劳永逸地处理缓存，我确实看了一下这个神秘剧本的代码：

document.write('<!--MA-WS-C23-->');
document.write('');
document.write('<script type="text/javascript" src="http://seatics.tickettransaction.com/jquery_tn.js"></' + 'script>');
 document.write('');


    var TN_ticketResults = null;

    function TN_populateTicketData(data) {
            TN_ticketResults = data;
        if(typeof TN_tryCreateTicketTable == "function")
            TN_tryCreateTicketTable();
        }

    (function() {
        var cysct = document.createElement("script");
        cysct.type = "text/javascript";
        cysct.src= '//tickets.tickettransaction.com/Tickets/ByEvent/?' + 
            'eventId=2175270&websiteConfigId=669&sort=retail&callback=TN_populateTicketData';
        cysct.async = true;
         var pnode = document.getElementsByTagName('script')[0];
        pnode.parentNode.insertBefore(cysct, pnode);

    })();


 document.write('');
document.write('<script type="text/javascript" src="http://seatics.tickettransaction.com/swfobject_tn.js"></' + 'script>');
 document.write('');
document.write('<script type="text/javascript" src="http://seatics.tickettransaction.com/maincontrol_tnservice_tn.js" ></' + 'script>');
 document.write('');

    // ppcsrc 
    var cookie_tn_ppc_src ='';
    var tn_cookies = '; '+document.cookie + ';';
    var cookie_ppc_src_start =tn_cookies.indexOf('; tn_ppc_src=') + 13;
    if(cookie_ppc_src_start != 12)
        cookie_tn_ppc_src = '&ppcsrc=' + tn_cookies.substring(cookie_ppc_src_start, tn_cookies.indexOf(';', cookie_ppc_src_start));
    var acct_start =tn_cookies.indexOf('; rcaid=') + 8;
    if(acct_start != 7)
        cookie_tn_ppc_src +='&rcaid=' +  tn_cookies.substring(acct_start, tn_cookies.indexOf(';', acct_start));

    //map css suppliment
    var fileref=document.createElement("link"); 
    fileref.setAttribute("rel", "stylesheet"); 
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute('href', 'http://seatics.tickettransaction.com/tnservice_map_suppliment_tn.css');
    document.getElementsByTagName('head')[0].appendChild(fileref);

    //maps 
    var webParms = {
        swfMapURL    : "http://seatics.tickettransaction.com/FenwayPark_Baseball_2013-04-24_2013-04-24_1120_tn.swf",
        staticMapURL : "http://seatics.tickettransaction.com/FenwayPark_Baseball_2013-04-24_2013-04-24_1120_tn.gif",
        mapShellURL  : 'http://seatics.tickettransaction.com/mapshell_tn.swf'
    };

    webParms.vfsFilterAnimate = 'vertical-list';
    webParms.vfsImageAnimate = 'vertical-list';
    webParms.vfsEnable = 'selected-hover';





    var TN_docFinishedLoading = false;
    window.onload = function() {

        ssc.EH.buyTickets = function(buyObj) {
            var purchaseUrl = 'https://tickettransaction2.com/Checkout.aspx?wcid=669&e=' + escape(buyObj.tgSds) + cookie_tn_ppc_src + '&treq=' + buyObj.buyQty + '&SessionId=' + makeGuid();
            if (typeof AppendToPurchaseUrl == "function") {
                try {
                    purchaseUrl = AppendToPurchaseUrl(purchaseUrl);
                } catch(e) {
                }
            }

            if (typeof PopupCheckOut == "function" && PopupCheckOut())
                window.open(purchaseUrl, '_blank', 'location=no,scrollbars=yes,resizable=yes,menubar=yes,toolbar=yes');
            else
                location.href = purchaseUrl;
        };

        TN_docFinishedLoading = true;
        TN_tryCreateTicketTable();
    };

    var TN_onEmptyEvent = TN_onEmptyEvent || function(title) {

        $("#tn_loading").css("display", "none");
        $("#ssc_listAndMapDiv").css("display", "none");
        $("#tn_tblNoResults").css("display", "");

    };

    function TN_tryCreateTicketTable() {
        if (TN_docFinishedLoading && TN_ticketResults) {
            if (TN_ticketResults.TicketsAvailable) {
                $("#tn_loading").css("display", "none");
                ssc.loadTgList(TN_ticketResults.TicketData, webParms);
            } else {
                TN_onEmptyEvent('Boston+Red+Sox+vs.+Tampa+Bay+Rays+on+Tue%2c+Apr+29+2014');
            }

        }
    }


    function makeGuid() {
        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
        var guidLength = 5;
        var guid = '';
        for (var i = 0; i < guidLength; i++) {
            var rnum = Math.floor(Math.random() * chars.length);
            guid += chars.substring(rnum, rnum + 1);
        }
        return guid;
    }

    function GoToOtherGame(eventid) {
        if (eventid != '')
            document.location = 'ResultsTicket.aspx?evtid=' + eventid;
    }




 document.write('<table class="tn_results_header">    <tr class="tn_results_header_title">        <td class="tn_results_header_title">            Boston Red Sox vs. Tampa Bay Rays        </td>        <td class="tn_results_header_venue">            Fenway Park            <br />            Boston, MA        </td>        <td class="tn_results_header_datetime">            Tue, Apr 29 2014            <br />            7:10 PM        </td>    </tr>        <tr class="tn_results_header_divider">        <td colspan="3" class="tn_results_header_divider">        </td>    </tr></table>     <div id="tn_loading" style="text-align:center;"><img src="//s3.amazonaws.com/TNService/Images/spinner.gif"/></div><div id="ssc_listAndMapDiv"></div><table style="display: none;" id="tn_tblNoResults" class="tn_results_notfound" cellspacing="0" cellpadding="4">    <tr class="tn_results_notfound">        <td class="tn_results_notfound">            There is currently no online inventory available for this event.            <br />            <br />            Please contact <span class=\'tn_results_notfound_name\'>                TicketSociety.com</span> at <span class="tn_results_notfound_phone">                    (866) 459-9233</span> or <a class="tn_results_notfound_email"                        href="mailto:CustomerSupport@TicketSociety.com">                        CustomerSupport@TicketSociety.com</a> to check availability for this event.        </td>    </tr>    <tr valign="middle" class="tn_results_divider">        <td class="tn_results_divider">        </td>');
 document.write('    </tr></table>');

正如预期的那样，它会执行一些实际工作两次的内联Javascript。在查看大表之前的2行标题时，您可以看到它。他们确实出现了两次您还可以检查DOM，您将看到第二个div填充了一个骨架表，但该表从未填充。

不幸的是，代码还定义了一些被第二个include覆盖的变量和函数。结果是Ajax请求无法成功（主要是因为代码不是设计为在同一页面上处理相同的Ajax请求两次）。

多个JavaScripts - 两者都单独工作，但如果一起使用，则第二个不做任何事情

4 个答案: