Recommended
Recommended
More Related Content
Featured
Featured (20)
Dynamic async Friendly IFrameの話
- 12. まとめると・・・・ scriptタグ IFrame 広告の最適化 ○ ✖ セキュリティ ✖ ○ レンダリングへの影響 ✖ △ 実装コスト ○ △ scriptタグによる実装 広告の最適化は可能だが、親ページへの悪影響を与える可能性 IFrameによる実装 親ページへの悪影響はないが、広告の最適化ができない
- 14. FriendlyIFrameの実装方法 src属性をabout:blankにしたiframeを動的に生成 サードパーティのコードを呼び出すscriptタグを iframe内に設置 inDapIF=trueというフラグをiframe内に作る <iframe src="about:blank"> <html> <head></head> <body> <script src="https://ads.js"></script> <script>inDapIF = true</script> </body> </html> </iframe>
- 15. FriendlyIFrameとその他方式の比較 scriptタグ IFrame FriendlyIFrame 広告の最適化 ○ ✖ ○ セキュリティ ✖ ○ ✖ レンダリングへの影響 ✖ △ △ 実装コスト ○ △ ✖ FriendlyIFrameの中身は同一オリジンなので、親ペ ージにアクセス可能 FriendlyIFrameはIFrameの一つなので、非同期で読 み込める
- 18. DynamicasyncIFrameの実装 srcを空にしたIFrameを設置しておく IFrameのonloadイベントを上書きして、onloadイ ベントの中でサードパーティーのスクリプトタグを挿 入する <iframe src="" id="frame"></iframe> <script> const ifrm = getElementById("frame"); ifrm.contentWindow.document.open().write('<body onload="' 'var d = document;d.getElementsByTagName('head')[0].' + 'appendChild(d.createElement('script')).src' + '=広告のURL">'); </script>
- 19. DynamicasyncIFrameを他の手法と比較 scriptタグ IFrame FiF DAiF 広告の最適化 ○ ✖ ○ ✖ セキュリティ ✖ ○ ✖ ○ レンダリングへの影響 ✖ △ △ ○ 実装コスト ○ △ ✖ △ DynamicasyncIFrameはIFrameのonloadイベントが 終了してからIFrameの中身を読み込むので、親ページの onloadを妨げない
- 21. 他の手法との比較 scriptタグ FiF DAiF DAFiF 広告の最適化 ○ ○ ✖ ○ セキュリティ ✖ ✖ ○ ✖ レンダリングへの影響 ✖ △ ○ ○ 実装コスト ○ ✖ △ ✖ ✖ セキュリティ面以外は最強(ただし実装コスト・・・)。
- 23. おまけ 真に最強のIFrame DynamicasyncSafeFrame(DASF) scriptタグ FiF DAiF DAFiF DASF 広告の最適化 ○ ○ ✖ ○ ○ セキュリティ ✖ ✖ ○ ✖ ○ レンダリングへの影響 ✖ △ ○ ○ ○ 実装コスト ○ ✖ △ ✖ ✖ ✖ ✖ ✖