MoChiwakiブログ

若手女性エンジニアがゆる~く書く備忘録ブログ

iframeの操作について

iframeの操作について

iframeはあるHTML内にHTMLを入れることができるようなタグです。

これを使うと、違うサーバ上のものも参照することができる。
でもいじるときは少し操作が面倒なんです。

例えば

  1. iframeの中身を参照するときのコマンドが長い、ややこい
  2. というか同じドメインでなければiframeの中身が見れない

1. iframeの中身を参照するときのコマンドが長い、ややこい

確かにややこしい。

document.getElementsByTagName('iframe')

で取れるまではまだいい。しかしその中のimgのsrcを取ろうものなら…

document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByTagName('img')[0].src   

長っww

2. というか同じドメインでなければiframeの中身が見れない

上のをコンソールでたたいてもエラーになる場合があります。
何故なら、ドメインがちがうからー!!

Uncaught DOMException: Blocked a frame with origin "https://localhost:8443" from accessing a cross-origin frame.

iframeの中をチェックしたかったので、
srcを変更して自分のサーバ経由でリクエストしてレスポンスをHTMLに表示するっての
作ったんですが、絶対パスで書かれてると見れますが、
iframeの中ってけっこう相対パスとかで書かれてること多くて崩れるのもたくさんでした (´;ω;`)