Chrome和Firefox在脚本执行顺序上的差异

时间:2018-12-19 06:37:04

标签: javascript php google-chrome firefox

由于我不熟悉编程并尝试一次学习多种语言,因此我在一个文件夹中制作了一系列文件,以测试这些不同的语言/技术如何协同工作。在该文件夹中,我有两个php文件(包括我正在测试的主文件;'index.php'),一个css文件,一个json文件和两个javascript文件。问题是,当我使用XAMPP apache服务器在浏览器中运行它时,引用“ index.php”文件上的“ script.js”和“ secondscript.js”文件的脚本似乎执行错误。根据情况订购。我希望它们都按照它们在文件中出现的顺序执行,但是如果我使用Chrome,即使我交换它们在文件中的写入顺序以及使用Firefox,也始终会首先执行“ secondscript.js” ,始终先执行“ script.js”。这是代码:

index.php:

<!DOCTYPE html>
<html>
<head>



<link rel="stylesheet" href="style.css">     <!-- ADD CSS  -->




<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ADD JQUERY -->

<script>    window.jQuery || document.write('<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"><\/script>')</script>    <!-- ADD JQUERY BACKUP -->



<script src="secondscript.js"></script>
<!-- ADD JQUERY TEST -->

<script src="script.js"></script>
<!-- ADD JAVASCRIPT -->






</head>
<body>

<div id="ajaxdiv"></div>
<!-- ADD AJAX TEST -->




<?php include 'server.php'?>
<!-- ADD PHP -->


<noscript>Sorry, your browser does not support JavaScript!</noscript>
<!-- ADD BACKUP FOR JSLESS BROWSER -->

</body>
</html>

script.js:

document.write("<h1>Header</h1>")

Request = new XMLHttpRequest()
Request.open('GET', 'json.json')


Request.onload = function (){
Data = JSON.parse(Request.responseText)
p = document.createElement('p')
node = document.createTextNode(Data[1].Three)
p.appendChild(node)
document.getElementById("ajaxdiv").appendChild(p)
}

Request.send()

secondscript.js:

$(function() { alert('Alert') })

server.php:

<?php echo 'PHP TEST'?>

style.css:

body {background-color: pink}
h1 {color: red}
p {color: purple}

json.json:

[{"One": "A", "Two": "B"}, {"Three": "C", "Four": "D"}]

编辑:“首先执行”对我来说似乎是这样,因为通过ajax出现的“ C”出现在警报消息之前或之后,具体取决于浏览器。

0 个答案:

没有答案