JS没有运行第一次HTML页面加载 [英] JS not running first time HTML page loads
问题描述
第一次加载HTML页面时，javascript函数不运行。但是，如果我进行页面刷新，脚本运行得很好。
描述：
我的索引页面有一个指向showdata HTML页面的按钮。
问题是，当我点击索引页面中的按钮时，我可以看到（在URL中）showdata.html页面已加载，但JS代码无法运行（因为我看不到任何警报）。
但是，如果我手动进行页面刷新或点击URL，JS运行良好，我可以看到警报语句。
在Chrome和Firefox上试用过这两个地方的结果。
如果我没有错，$（function（） $（document）.ready。在任何情况下，我都试过使用这两种语法，但结果是一样的。
页面的当前代码是：
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< title>测试< / title>
< script src =http://code.jquery.com/jquery-1.11.1.min.js>< / script>
< script src =http://code.jquery.com/mobile /1.4.3/jquery.mobile-1.4.3.min.js\"& GT;< /脚本>
< script type =text / javascript>
$（function（）{alert（hello）;}）;
< / script>
< / head>
< body>< / body>
< / html>
第一次加载页面时，我无法看到预期的警报框。当我重新加载页面时，警报就像预期的一样。
更新：
结果。
另外，当我删除
<脚本SRC = http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js >< /脚本>来自索引页的
标记，其中存在指向我当前页面的链接，JS在showdata.html页面的第一次加载时正确触发。但是，这会导致索引页面中样式的丢失。
在.get内部，确保指定数据。通过将refresh添加到.done中，它会告诉AJAX等待成功调用重新加载表之后，我相信它会起作用。您可以尝试的另一件事是将javascript放在
< script type =text / javascript>
$（function（）{
jQuery.get（'filename.txt'，function（data）{
var lines = data.split（\\\
）;
var newrow =;
for（var i = 0，len = lines.length; i <（len-1）; i = i + 2）{
newrow =< tr> ;< td>+ lines [i] +< / td>+< td>+ lines [i + 1] +< / td>< / tr>;
$（'＃tableoverview'）。find（'tbody：last'）。append（newrow）;
}
}，'text'）。done（function（）{
$ （#tableoverview）。table（refresh）;
}）;
}）;
< / script>
您也可以尝试 $（document.body）.ready
< script type =text / javascript> ;
$（document.body）.ready（
$（function（）{
jQuery.get（'filename.txt'，function（data）{
var lines = data .split（\\\
）;
var newrow =;
for（var i = 0，len = lines.length; i <（len-1）; i = i + 2）{
newrow =< tr>< td>+ lines [i] +< / td>+< td> / td>< / tr>;
$（'＃tableoverview'）。find（'tbody：last'）。append（newrow）;
}
$（＃tableoverview ）.table（refresh）;
}）;
}）;
）;
< / script>
编辑：
我对此进行了一些研究，你似乎在使用表格部件和回流表部件 .table（refresh）; 的组合。 >
您是否尝试删除它并使用 .table（reflow）; 以及< table data-role =table id =tableoverviewdata-mode =reflowclass =ui-responsive table-stroke> 改为？
The javascript function does not run when the HTML page loads for the first time. However, if I do a page refresh, the script runs just fine.
Description :
My index page has a button which points to a showdata HTML page. The problem is that when I click the button in the index page, I can see (in the URL) that the showdata.html page is loaded but the JS code does not run (as I cannot see any alerts).
However, if I do a page refresh or hit the URL manually, the JS runs fine and I can see the alert statements.
Tried this on Chrome and Firefox and same results at both the places.
If I am not wrong the $(function() is a shorthand for $(document).ready. In any case, I've tried using both the syntax but the results are same.
The current code for the page is:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
$(function() { alert("hello"); });
</script>
</head>
<body></body>
</html>
I am unable to see the expected alert box when the page first loads. When I reload the page, the alert comes as expected.
Update:
I cleared the cache but no results.
Also, when I remove the
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
tag from the index page where the link to my current page is present, the JS fires correctly on the first load of the showdata.html page. However, this causes loss of styling in the index page.
Inside your .get, make sure you are specifying the type of data. By adding your "refresh" to .done, it tells AJAX to wait until after the success call to reload the table, I believe it will work. Another thing you can try, is put the javascript after your </table> in the body so the HTML table is always loaded first.
<script type="text/javascript">
$(function() {
jQuery.get('filename.txt', function(data) {
var lines = data.split("\n");
var newrow = "";
for (var i = 0, len = lines.length; i < (len-1); i=i+2) {
newrow = "<tr><td>"+lines[i]+"</td>"+"<td>"+lines[i+1]+"</td></tr>";
$('#tableoverview').find('tbody:last').append(newrow);
}
},'text').done(function() {
$("#tableoverview").table("refresh");
});
});
</script>
You can also try $(document.body).ready which should not execute until after the body has loaded.
<script type="text/javascript">
$(document.body).ready(
$(function() {
jQuery.get('filename.txt', function(data) {
var lines = data.split("\n");
var newrow = "";
for (var i = 0, len = lines.length; i < (len-1); i=i+2) {
newrow = "<tr><td>"+lines[i]+"</td>"+"<td>"+lines[i+1]+"</td></tr>";
$('#tableoverview').find('tbody:last').append(newrow);
}
$("#tableoverview").table("refresh");
});
});
);
</script>
EDIT:
I did some research on this and you seem to be using a mix of the table widget and the reflow table widget .table("refresh");.
Have you tried removing that and using .table("reflow"); along with <table data-role="table" id="tableoverview" data-mode="reflow" class="ui-responsive table-stroke"> instead?
这篇关于JS没有运行第一次HTML页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
