Question

我有一个网页，通过标签链接一些JavaScript。该脚本是amazon-localiser.js，它将亚马逊链接更改为适合访问者的链接。例如一个Amazon.com链接将转换为amazon.co.uk为英国访问者或Amazon.de为德国访问者。它还附加链接相关的亚马逊联盟链接。

当用户登陆页面时，他们会点击一些选项（javascript），但是当您到达亚马逊链接时，必须刷新页面才能使amazon-localiser.js脚本正常工作。我曾尝试在HTML中使用页面刷新，但这让我回到问题的最开始。如何在不影响网站上用户位置的情况下重新加载JavaScript？

该网站是www.wfbsir.com，如果你选择“Scifi”然后“可能”你会看到一个amazon.com链接，如果你将鼠标悬停在它上面，你会看到它链接到amazon.com如果你刷新页面上会显示当地商店的链接，并附上附属链接。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>What book should I read?</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="app.css" />

  </head>
  <body>
<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 text-right">
        <button class="btn btn-default btn-corner" type="submit" data-bind="click: startOver, visible: queryData().id > 0">Start over</button>
      </div>
    </div>
  </div>

  <div class="container main">
    <div class="row">
      <div class="c12 text-center">
        <h1 data-bind="text: queryData().text"></h1>
        <h3 data-bind="text: queryData().subhead"></h3>
        <h3><a data-bind="text: queryData().link, attr: {href: url}"></a></h3>
        <div class="option-group" data-bind="foreach: queryData().answers">
          <button class="btn btn-default btn-lg" type="submit" data-bind="click: $parent.goToTarget, text: text"></button>
        </div>
        <button class="btn btn-default" type="submit" data-bind="click: stepBack, visible: navHistory().length > 1">Previous Step</button>
                            <button class="btn btn-default" type="submit" data-bind="click: buyBook, visible: navHistory().length > 1">Buy the book</button> 
             </div>
    </div>
  </div>
  <div class="push"></div>
</div>


<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="app.js?v=0.4.0"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="amazon-localiser.js"></script>
<script>

</script>

我尝试过使用jQuery getScript和window.location.reload（）;但是既不重新加载javascript，我唯一可以找到工作的是F5 / Refresh。

Answer 1

我注意到amazon-localiser.js调用了页面的函数findLocation onload，如下所示。

if (window.addEventListener) {
    window.addEventListener("load", findLocation, false)
} else {
    window.attachEvent("onload", findLocation)
}

因此，对您的问题可能的解决方案是，当您需要更新亚马逊链接时，可以再次调用此功能。我尝试从控制台调用它并且它可以正常工作，因此请在需要时尝试手动调用findLocation()，看看它是否适合您的范围。

西蒙

Answer 2

您可以在页面上添加具有某些条件的动态脚本，例如：

var script = document.createElement('script');
var src;

if (true) {
  src = 'amazon.co.uk';
} else {
  src = 'amazon.com';
}
script.src = src;
document.head.appendChild(script);

Answer 3

正如gnllucena所说，你可以查看问题或者有解决方案。

构建加载程序功能：

将以下代码放入文档

<script type="text/javascript">
function LoadMyJs(scriptName) {
var docHeadObj = document.getElementsByTagName("head")[0];
var newScript= document.createElement("script");
newScript.type = "text/javascript";
newScript.src = scriptName;
docHeadObj.appendChild(newScript);
}
</script>


// place a button for reloading script.

<input type="button" name="reloadNewJs" value="Reload JavaScript" onClick="LoadMyJs('needed_script.js')">

如何在不刷新页面的情况下重新加载javascript？

3 个答案: