Is it bad practice to embed JavaScript into the body of HTML?

前端 未结 17 2402
梦谈多话
梦谈多话 2020-12-13 01:44

A team that I am working on has gotten into the habit of using

相关标签:
17条回答
  • 2020-12-13 01:49

    It is valid to add <script> in body, but Internet Explorer really doesn't likes it. So to be on the safer side, make sure you have your scripts inside the <head> tag.

    That was really creating havoc (especially for Internet Explorer) in the project which we are working on.

    0 讨论(0)
  • 2020-12-13 01:54

    As several people mentioned, it's valid, it works, and it is widely used.

    Best practices as far as semantics recommend (or at least used to recommend) is placing script tags inside of the header.

    More modern best practices which take performance into account recommend placing script tags (external and inline) at the bottom right before the body tag, to allow the markup to render completely before any JavaScript code executes.

    For easier to understand and maintainable code, "unobtrusive JavaScript" is recommended, where the code is in an external file and binds events to the DOM (Google unobtrusive JavaScript).

    One case where it's useful to have JavaScript inline is to initialize variables with values that only exists server side, which will then later be used by the external JavaScript code.

    0 讨论(0)
  • 2020-12-13 01:57

    See the Yahoo UI for best practice: http://developer.yahoo.com/performance/rules.html (JavaScript at the bottom of the page)

    0 讨论(0)
  • 2020-12-13 01:58

    I prefer to put references to external scripts into the head, and scripts that start things up and initialize widgets and whatnot into the body.

    An issue that's very easy to run into is that a script element in the body cannot access elements that come after it. Also, a related nasty browser compatibility issue is the fact that IE doesn't allow script elements to modify the element they're in. So if you have this:

    <div id="foo">
      <script type="text/javascript">
        document.getElementById("foo")... // do something to it
      </script>
    </div>
    

    IE is not going to like your page. Old versions of IE used to give very cryptic error messages for this or even blank the entire page, but IE8 seems to give a descriptive error message.

    As long as you make sure that your scripts only access DOM that's safe to access, I don't think it's evil to put script elements into the body. In fact, IMHO, putting scripts that initialize widgets after the related elements can be more readable than putting everything in one place (and I believe this might also make them run earlier, which makes stuff jump around less as the page loads).

    0 讨论(0)
  • 2020-12-13 02:00

    It is perfectly valid, though it might hurt maintainability. See also Where should I put <script> tags in HTML markup? and Why does the call to this jQuery function fail in Firefox?.

    0 讨论(0)
  • 2020-12-13 02:01

    It is valid!

    You can use:

    <script type="text/javascript">
        //<![CDATA[
    
        // Some JavaScript code that perfectly validates in the W3C validator
    
        //]]>
    </script>
    

    I don't think you can say if it is a bad practice in general. You have to tell in the case. But sure is that it is good to have all your JavaScript code at the same place. It's a little messy if you have little pieces of JavaScript code all over your HTML file.

    0 讨论(0)
提交回复
热议问题