{"id":899,"date":"2012-01-23T15:57:18","date_gmt":"2012-01-23T14:57:18","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=899"},"modified":"2012-01-23T15:58:37","modified_gmt":"2012-01-23T14:58:37","slug":"domcontentloaded-pour-cross-browser-multi-navigateurs-javascript","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2012\/01\/23\/domcontentloaded-pour-cross-browser-multi-navigateurs-javascript\/","title":{"rendered":"DOMContentLoaded pour cross browser (multi-navigateurs) [Javascript]"},"content":{"rendered":"<p>Apr\u00e8s avoir parcouru le Net pour un \u00e9v\u00e8nement <code>DOMContentLoaded<\/code> (qui s&#8217;enclenche avant <code>window.onload<\/code>) qui puisse fonctionner sur tous les navigateurs (et en particulier IE7), j&#8217;ai pu trouver un article qui explique bien les diff\u00e9rentes \u00e9tapes et la solution adapt\u00e9e : <a href=\"http:\/\/javascript.info\/tutorial\/onload-ondomcontentloaded\" title=\"DOMContentLoaded cross browser article\">http:\/\/javascript.info\/tutorial\/onload-ondomcontentloaded<\/a><\/p>\n<p>Pour r\u00e9sumer la fonction \u00e0 utiliser est :<\/p>\n<pre class=\"brush: javascript\">function bindReady(handler){\r\n  var called = false\r\n  function ready() { \r\n    if (called) return\r\n    called = true\r\n    handler()\r\n  }\r\n  if ( document.addEventListener ) { \/\/ native event\r\n    document.addEventListener( \"DOMContentLoaded\", ready, false )\r\n  } else if ( document.attachEvent ) {  \/\/ IE\r\n    try { var isFrame = window.frameElement != null } catch(e) {}\r\n\r\n    \/\/ IE, the document is not inside a frame\r\n    if ( document.documentElement.doScroll &#038;& !isFrame ) {\r\n      function tryScroll(){\r\n        if (called) return\r\n        try {\r\n          document.documentElement.doScroll(\"left\")\r\n          ready()\r\n        } catch(e) {\r\n          setTimeout(tryScroll, 10)\r\n        }\r\n      }\r\n      tryScroll()\r\n    }\r\n\r\n    \/\/ IE, the document is inside a frame\r\n    document.attachEvent(\"onreadystatechange\", function(){\r\n      if ( document.readyState === \"complete\" ) {\r\n        ready()\r\n      }\r\n    })\r\n  }\r\n\r\n  \/\/ Old browsers\r\n  if (window.addEventListener)\r\n    window.addEventListener('load', ready, false)\r\n  else if (window.attachEvent)\r\n    window.attachEvent('onload', ready)\r\n  else {\r\n    var fn = window.onload \/\/ very old browser, copy old onload\r\n    window.onload = function() { \/\/ replace by new onload and call the old one\r\n      fn &#038;& fn()\r\n      ready()\r\n    }\r\n  }\r\n}<\/pre>\n<p>A partir de l\u00e0 vous pouvez appeler votre fonction avec :<\/p>\n<pre class=\"brush: javascript\">bindReady(function() {\r\n  \/* quelque chose qui doit se lancer apr\u00e8s le chargement du DOM *\/\r\n});<\/pre>\n<p>Dans le cas o\u00f9 vous voudriez appeler plusieurs fonctions, alors vous pouvez simplement faire quelque chose comme :<\/p>\n<pre class=\"brush: javascript\">\r\nvar fonctionsACharger=[];\r\nbindReady(function() {\r\n  for (var i=0; i&lt;functionsACharger.length;i++) functionsACharger[i]();\r\n});\r\n\r\n\/* on ajoute les fonctions \u00e0 charger dans notre tableau *\/\r\nfonctionsACharger.push(function() {\r\n  \/* premi\u00e8re chose \u00e0 faire *\/\r\n});\r\nfonctionsACharger.push(function() {\r\n  alert(\"Toutes les fonctions sont maintenant charg\u00e9es !\");\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Apr\u00e8s avoir parcouru le Net pour un \u00e9v\u00e8nement DOMContentLoaded (qui s&#8217;enclenche avant window.onload) qui puisse fonctionner sur tous les navigateurs (et en particulier IE7), j&#8217;ai pu trouver un article qui explique bien les diff\u00e9rentes \u00e9tapes et la solution adapt\u00e9e : http:\/\/javascript.info\/tutorial\/onload-ondomcontentloaded Pour r\u00e9sumer la fonction \u00e0 utiliser est : function bindReady(handler){ var called = false [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[13,33],"tags":[128,24,152,158],"class_list":["post-899","post","type-post","status-publish","format-standard","hentry","category-niveau-intermediaire","category-programmation","tag-dom","tag-javascript","tag-niveau-intermediaire","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=899"}],"version-history":[{"count":4,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/899\/revisions"}],"predecessor-version":[{"id":902,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/899\/revisions\/902"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}