javascript - 如何动态调用此脚本来保存构建页面所需的内容并允许其仅运行一次？

Question

该脚本包含一些变量并执行一些 jQuery 操作。我需要它在页面加载时运行，它可以正常运行。

但是，当有人单击最初加载/创建的页面上的链接，转到该链接页面(外部但 jQuery Mobile)，并点击后退按钮(浏览器的或移动页面的标题中)时，脚本会再次运行.

我不希望出现这种行为，因为无需重建页面，因此性能会受到影响。

这是我加载脚本的方法:

url = $.url();
rawterm = url.param('t').toLowerCase();
term = decodeURIComponent(rawterm).replace(/\+/g, " ");


var script=document.createElement('script');
script.type='text/javascript';
script.src= rawterm + ".js";
$("body").append(script);

调用/创建的脚本具有如下内容:

tagLimit = 200;

var myName = rawterm;
var myKey = "somekey"
var updatePage = "mtl_u_master.html?t=" + myName;
var tagSearchPage = "mtl_s_master.html?t=" + myName;
var newestPage = "mtl_n_master.html?t=" + myName;


$('#searchPage').attr('href',tagSearchPage);
$('#updatePage').attr('href',updatePage);
$('#newestPage').attr('href',newestPage);

对任何和所有替代方法开放。谢谢!

Answer 1

当你说:

However, when someone clicks on a link on the originally loaded/created page, goes to that linked page (external but jQuery Mobile),

您的意思是您正在使用 rel="external".如果您这样做，则没有任何帮助，因为 rel="external"导致整个页面刷新，我不是在谈论 data-role="page"刷新，这将是完整的网页刷新。当您返回原始页面时，所有内容都将再次执行，包括您的脚本，但这应该不是问题，因为您的脚本第一次执行的所有内容现在都消失了(包括页面 DOM)。

有关此内容的更多信息，请参见:http://jquerymobile.com/test/docs/pages/page-links.html

如果您不使用 rel="external"(请记住 rel="external"应该仅用于从其他域加载页面)，您的问题可以轻松解决。您只需要使用 mobileinit 事件，如下所示:

$(document).on("mobileinit", function(){
    alert('Executed only once');
});

该事件只会执行一次，并且必须放置在加载 jQuery mobile js 的脚本标签之前，如下所示:

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />     
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
$(document).on("mobileinit", function(){
    alert('Executed only once');
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    

或者像这样:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

有关此内容的更多信息，请参见:http://jquerymobile.com/test/docs/api/globalconfig.html