Question

我正面临一个严峻的问题。我有一个页面有两个部分。在页面的第一部分，html通过ajax请求呈现。在第二页上，html在页面加载时呈现。页面的拳头部分是分开处理的，具有不同的分页脚本。分页也是通过向同一个URL发送ajax请求来处理的。

我对第一部分有疑问。为第一部分生成html的脚本也使用javascript生成大量的javascript标签和html。现在我在html中插入一个新的脚本标签时所做的是这样的：

var script   = document.createElement("script");
script.type  = "text/javascript";
script.text  = "window.twttr = (function (d,s,id) {var t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;js.src=\"//platform.twitter.com/widgets.js\"; fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });}(document, \"script\", \"twitter-wjs\"));(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;js = d.createElement(s); js.id = id; js.src = \"//connect.facebook.net/en_GB/all.js#xfbml=1\"; fjs.parentNode.insertBefore(js, fjs);}(document, \"script\", \"facebook-jssdk\"));var script_generated=1";               // use this for inline script
document.body.appendChild(script);

事实上，Twitter和Facebook连接语句在页面的第一部分的每个项目上显示类似Facebook的按钮和Twitter按钮。第一次加载页面时，会成功生成脚本标记。但是当我点击分页时，它会发送一个新的ajax请求以获得新页面的html，它还会再次生成相同的脚本标记。因此，在第二页上，我的Twitter按钮和Facebook之类的按钮没有显示。

我虽然是因为Facebook和Twitter的双重连接声明。然后我生成一个变量并在生成该脚本标记时设置一些值。在每个请求中，我检查该变量是否存在。如果它存在，我不会生成如下特定的脚本标记：

if(typeof script_generated === "undefined") {
  var script   = document.createElement("script");
  script.type  = "text/javascript";
  script.text  = "window.twttr = (function (d,s,id) {var t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;js.src=\"//platform.twitter.com/widgets.js\"; fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });}(document, \"script\", \"twitter-wjs\"));(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;js = d.createElement(s); js.id = id; js.src = \"//connect.facebook.net/en_GB/all.js#xfbml=1\"; fjs.parentNode.insertBefore(js, fjs);}(document, \"script\", \"facebook-jssdk\"));var script_generated=1";
           // use this for inline script
  document.body.appendChild(script);
}

不会重新生成此脚本标记，但推文和Facebook之类的按钮仍然无法显示。

现在我解释了（我可能错了）因为脚本标签是由ajax请求生成的，所以按钮没有正确显示，因为他们找不到脚本标签。

现在我想要的是，每当请求被发送到该文件时，它首先检查该特定脚本标记是否存在，删除它是否存在并生成新标记，否则生成。请指导我如何做到这一点。

如果我错误地解释了这个问题，请告诉我究竟是什么问题，以及如何解决这个问题。

Answer 1

当你动态添加时，你可以给脚本标记id。

var script   = document.createElement("script");
script.setAttribute('id', 'addedScript');
script.type  = "text/javascript";
script.text  = "window.twttr = (function (d,s,id) {var t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;js.src=\"//platform.twitter.com/widgets.js\"; fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });}(document, \"script\", \"twitter-wjs\"));(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;js = d.createElement(s); js.id = id; js.src = \"//connect.facebook.net/en_GB/all.js#xfbml=1\"; fjs.parentNode.insertBefore(js, fjs);}(document, \"script\", \"facebook-jssdk\"));var script_generated=1";
// use this for inline script
document.body.appendChild(script);

之后，您可以使用此方法检查脚本标记是否存在，并使用.remove（）查询函数删除。

if(addedScript != undefined) {
  $("#addedScript").remove();
}

Answer 2

您好，您可以获取该脚本标记的引用对象，您可以使用object更改引用的src文件。

应该是这样的，

var $jsRef = $('<script type="text/javascript" >').appendTo(document.body);
$jsRef.attr("src","jsFileName.js");

// You can also add content like this
$jsRef.append(content);


// You can change the js file name or content the same way
$jsRef.attr("src","newJSFileName.js");

// Changing the content like this
$jsRef.empty();
$jsRef.append(content);

或者，您可以设置脚本标记的ID，并根据ID更改内容，而不是使用对象访问。

如何删除已生成的脚本标记并重新生成？

2 个答案: