JavaScriptでiframeにアクセスの注意

iframeへのJavaScriptでのアクセスですが、アクセスする方法が少し異なるので記載します。また、2点ほど注意点を記載します。

iframeへのJavaScriptでのアクセス方法

アクセス方法は簡単で、
document.querySelector("XX")などで要素を取得して
contentWindow.documentで取得できます。

実際に以下の画像を取得するために開発者ツールで
document.querySelector("#executeScope").contentWindow.document
と記載すると#documentと結果が出てアクセスできるかと思います。

iframeへのJavaScriptでのアクセスが拒否される

しかし、すべてアクセスできるわけではなく iframeで埋め込んでいるサイトによってはアクセスが拒否されます。

試しに以下の画像を取得するために開発者ツールで
document.querySelector("#twitter-widget-1").contentWindow.document
と記載してみてください。

#雨宿り #つばめ pic.twitter.com/WEhispwUg2
— mtaketani113 (@mtaketani113) April 21, 2022

以下のような結果が出ると思います。

VM3797:1 Uncaught DOMException: Blocked a frame with origin "https://mtaketani113.github.io" from accessing a cross-origin frame.
    at <anonymous>:1:58

originというのがhttps://サイト:ポート　のことでこれが異なるということでブロックされています。埋め込んでいるサイトで許可する必要があるので、アクセスできない場合もあります。

開発者ツールでの要素検索後の挙動

開発者ツールで要素の検索をする機能があると思います。それでiframeの要素をクリックすると、埋め込んだサイトのほうに主が移るようです。

実際に埋め込んでる画像をクリックすると、
document.querySelector("#twitter-widget-1").contentWindow.document
が効かなくなるかと思います。

##　まとめ

iframeのアクセス方法はcontentWindow.documentでアクセスできますが、相手側が拒否してるとアクセスできない場合があります。

また、開発者ツールで要素検索でクリックすると、埋め込んだサイトのほうに移ってしまうようです。開発者ツールでiframeの情報を見る場合は少し注意ください。

作成日:2022-05-25　更新日:2022-05-25