#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    228
    Rep Power
    0

    How does javascript manage to generate different html in different browsers?


    How does javascript manage to generate different html in different browsers?

    I am in the process of trying to make my own meta search engine. So I looked into the html source from a google search. In IE, (when I click to view the source) the search results do not appear. But in Frefox, the source text is dfferent and more complete. When I use Firefox to "view page source", the search result hyperlinks are there with their entire content.

    This is suprising and not what I would expect. I thought that in order to have different html in different browsers, there had to be a back end pushing the different content based on either ASP or PHP. What is the technology that google is using?

    Maybe it is just the way that the browser is displaying the html tags. Could this have something to do with "outerHTML" and, if so, how do I programatically use it?
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Post your examples please.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    24
    Rep Power
    0
    Maybe you're using JavaScript functions that are not supported in IE ?
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    228
    Rep Power
    0
    Originally Posted by Winters
    Post your examples please.
    What do you mean? How can I be more descriptive? You can do this for yourself just as easily as reading a description.
    1. Open IE
    2. Go to google.com
    3. conduct a search.
    4. Then in the IE browser, select from the menu to view the source
    5. Notice that the text provided does not contain the hyperlinks or content from the search results
    6. Now do the same thing but with the FireFox browser
    Notice that the text representing the html source in FireFox of a google search result actually does contain the result of the search

    The javascript at the top of the files is a little different.

    After the body tag, the files are the same until this html code:
    Code:
    <script>if(google.j.b)document.body.style.visibility='hidden';
    </script>
    Then the files differ radically. I think the key must be in "(google.j.b)" but it only appears once in both source text files.Is this somehow set in the browser? How can C# code set this when doing an htmlrequest?

    Firefox:


    IE:
    Last edited by complete; October 23rd, 2012 at 11:33 AM.
  8. #5
  9. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,236
    Rep Power
    1469
    The main difference here is that the two browsers do different things. In IE, when you view source, it displays the actual source delivered to the browser. (Possibly complete with errors.) In Firefox, you see the generated code that Firefox is displaying--as interpreted by Firefox. As an example, if you leave off a required closing tag, Firefox will add it itself. The same goes for required attributes. Firefox shows the "corrected" or generated code as it was interpreted by the browser.

    That being said, viewing source in any browser does not necessarily reflect what's actually being displayed. Any client-side changes (ie, through Javascript) are not shown.

    In Firefox, it's best to install the Web Developer Toolbar and use View Source>View Generated Source. This will show you the source code as it's being displayed as a real time snapshot.

    Similarly, there are web developer extensions for IE, Safari, and Chrome that do the same.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    228
    Rep Power
    0
    Originally Posted by leonvv
    Maybe you're using JavaScript functions that are not supported in IE ?
    But shouldn't the HTML source code still be idential in both borowsers?
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    228
    Rep Power
    0
    Originally Posted by Nilpo
    The main difference here is that the two browsers do different things. In IE, when you view source, it displays the actual source delivered to the browser. (Possibly complete with errors.) In Firefox, you see the generated code that Firefox is displaying--as interpreted by Firefox. As an example, if you leave off a required closing tag, Firefox will add it itself. The same goes for required attributes. Firefox shows the "corrected" or generated code as it was interpreted by the browser.

    That being said, viewing source in any browser does not necessarily reflect what's actually being displayed. Any client-side changes (ie, through Javascript) are not shown.

    In Firefox, it's best to install the Web Developer Toolbar and use View Source>View Generated Source. This will show you the source code as it's being displayed as a real time snapshot.

    Similarly, there are web developer extensions for IE, Safari, and Chrome that do the same.
    Thanks. This is interesting.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Originally Posted by complete
    This is suprising and not what I would expect. I thought that in order to have different html in different browsers, there had to be a back end pushing the different content based on either ASP or PHP. What is the technology that google is using?
    (Client-side) JavaScript can't change the source code of a page. All such JavaScript is processed in the browser and has no way to make changes to the raw HTML. Server-side JavaScript, for example "Node.js", is gaining popularity though.

    I don't know what server-side language Google is using.

    Originally Posted by complete
    Maybe it is just the way that the browser is displaying the html tags. Could this have something to do with "outerHTML" and, if so, how do I programatically use it?
    No, Google is serving different code. But you can use outerHTML to see the majority of the generated source in IE. IIRC, things like the doctype and XML prolog won't appear in it.

    Originally Posted by Nilpo
    In Firefox, you see the generated code that Firefox is displaying--as interpreted by Firefox. As an example, if you leave off a required closing tag, Firefox will add it itself. The same goes for required attributes. Firefox shows the "corrected" or generated code as it was interpreted by the browser.
    Eh? Which method are you using to look at the source?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo