javascript - 基本的 javascript 流程 - 在各种浏览器中

标签 javascript google-chrome firefox

我试图通过一个非常简单的 JavaScript 示例来学习 JavaScript 中的流程,但是三种浏览器(Chrome、IE 和 Firefox)这三种浏览器都显示不同的流程模式和不同的最终结果。我知道会出现跨浏览器问题,但这个问题非常简单。所以我试图了解如何解释 JavaScript 的实际流程。

这是代码:

<!DOCTYPE html>
<html>
<head>
<title>Test 01</title>
    <script type="text/javascript">
    document.bgColor = "red"; 
    </script>

</head>

<body bgColor="yellow">

<p>Paragraph 1</p>
<script>alert("after para 1");</script>
<p>Paragraph 2</p>
<script>alert("after para 2");</script>
<p>Paragraph 3</p>
<script>alert("after para 3");</script>

</body>
</html>

我看到的是,“第 1 段”文本在警报之后显示在 Chrome 中,依此类推,还有其他两个警报。 IE 和 Firefox 似乎在这里做了正确的事情 - 在警报之前显示文本。

在 IE 和 Firefox 之间,IE 的背景为红色,而 Firefox 的背景为黄色。所以不确定到底要解释什么......所有浏览器的行为都是不同的。

您如何了解这到底是如何工作的?

编辑:删除与此问题无关的 var x=10 。问题是如何解释在相关文本之前显示警报的 chrome 行为 - 以及为什么 bgcolor 在一种情况下被覆盖,而在其他情况下则不然。

最佳答案

欢迎来到浏览器中的 JavaScript 世界。跨浏览器的不同行为是可以预料的,而不是异常(exception)。

了解不推荐您的代码所做的事情应该会有所帮助。任何实际执行某些操作(例如警报)的 JavaScript 语句都应该只在关闭 body 标记之前出现。

当您不尊重这一点并尝试在浏览器仍在渲染页面时运行代码时,就会发生不好的事情。不过,在此之前您可以有任意数量的声明,只要它们在文档正文结束之前不会被调用。

关于javascript - 基本的 javascript 流程 - 在各种浏览器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39059229/

相关文章:

javascript - Ajax 请求在 Chrome 中成功,但在 Firefox 中失败

javascript - 无法使用 Angular.js 显示错误消息

jquery - 如何在 Chrome 扩展程序弹出窗口显示后触发事件?

javascript - 未捕获的语法错误 : Unexpected token } in Google Chrome

Javascript 常规异常在 Chrome 和 Firefox 中每两次尝试匹配一次字符串

html - CSS 文本抖动 firefox

html - 垂直居中在 Mozilla 下不起作用

javascript - 如何在 amCharts 中设置 RTL?

html - Firefox 包装内联 div,但其他浏览器不包装

javascript正则表达式拆分包括分隔符