Do not use document.write
- 1. Do not use document.write Haruki Okada (@ocadaruma)
- 4. Parser-blocking <html> ??? <body> <script> var url = /slideshow/do-not-use-documentwrite-82438280/82438280/"/example.com/foo.js"; var tag = '<scr' + 'ipt src=/slideshow/do-not-use-documentwrite-82438280/82438280/"& + url + '">' + '</scr' + 'ipt>'; document.write(tag); </script> ??? ???scriptがロ`ドできるまでブロックされる ??? </body> </html>
- 5. 掲揖豚に弖紗した翌何jsでは咾ない foo.js document.write("<p>HELLO</p>"); <script> var sc = document.createElement("script"); sc.src = /slideshow/do-not-use-documentwrite-82438280/82438280/"/example.com/foo.js"; document.body.appendChild(sc); </script>
- 6. Case study
- 7. タグマネ議なことをしたい 販吭のタグを掲揖豚に塘佚したい document.write を聞ったタグも根む document.write 秘りのタグを塘佚する栽、 document.write によってき竃されるべき侭に き竃したい
- 8. つまり <html> ??? <body> ??? <script> // タグを塘佚する採らかのコ`ド </script> <div id="place-to-be-inserted"></div> ??? </body> </html> place-to-be-inserted の侭に、塘佚したタグを托め zみたい
- 9. どうg廾するか
- 10. 1. document.write を壅g廾する Idea: 1,2,3を佩うv方で、document.writeを崔きQえる 1. temporaryなdiv を恬る 2. div にinnerHTMLをset 3. div の徨を壅｢議にtraverseして、あるべき侭に insertしていく
- 12. Example 塘佚するタグ: <script> var url = /slideshow/do-not-use-documentwrite-82438280/82438280/"/example.com/foo.js"; var tag = '<scr' + 'ipt src=/slideshow/do-not-use-documentwrite-82438280/82438280/"& + url + '">' + '</scr' + 'ipt>'; document.write(tag); </script> document.writeを壅g廾してるので、 tag は掲揖豚 にロ`ドされる tag がき竃される了崔は、g佩に卆贋
- 13. 2. iframeにき竃す Idea: 1. temporaryなiframe を恬る 2. 塘佚したいタグをiframe にwriteする 3. iframe のdocument坪から、圷のdocumentに卞し 紋える 歌深: https://aloerina01.github.io/javascript/2016/10/14/1.html
- 15. Example parent's location = "http://localhost/?foo=bar#baz" Browser contentWindow.location.href Safari 11.0.1 (OSX) "http://localhost/?foo=bar#baz" Chrome 62.0.3202.94 (OSX) "http://localhost/?foo=bar" Firefox 57.0 (OSX) "http://localhost/?foo=bar#baz"