読者です 読者をやめる 読者になる 読者になる

7cc@はてなブログ

JavaScriptとかとか

element.ownerDocument.defaultView.frameElement

iframe traversal iframe, window, documentを移動する window document iframe[name=foo] window document element window.top window.parent window.foo window.frames[n] window[n] document contentWindow frameElement contentDocument defaultView ownerDocument

実はこのエントリはSVGの練習も兼ねていたり。上の画像のテキストは選択可能。
IE9だと矢印の一部が表示されませんorz。

トラバーサルについて

frame内のwindowの参照

いくつか方法があるが、windowから子windowへの移動はしにくい。 一旦frame要素を経由する方がよい。

直接windowに移動する場合

window.foo // グローバル変数と衝突
window[n]
window.frames[n] // window.frames === window が古いIE以外trueになる。
                 // もはや使う意味が無さそう?

一旦frame要素を経由する場合

var iframe = document.querySelector("iframe[name='foo']")
  , win = frame.contentWindow || frame.contentDocument.defaultView

要素とwindow

// 要素からwindow
el.ownerDocument.defaultView
el.ownerDocument.parentWindow // IE8以下はparentWindow

//  window.topの要素か <-> iframe内の要素か
! el.ownerDocument.defaultView.frameElement // null or true

tips

  • スクリプトの実行されるコンテキストを意識しないと混乱する
    • topからフレーム
    • フレームから他のフレーム
  • window.window, window.documentwindow.alertなどと同じように、普段はwindowを省略していると考えられる。