frameまたはiframe要素内のdocumentを取得して操作

このiframeの操作は、自分で設定したiframeに対してです。 外部のサイトの操作は、クロスサイト的に難しいと思います。

iframeを外から操作する

そんなことはめったにありませんが、たとえば、純粋なサイトでＣＳＳを試したり 見た目をチェックする機会は有るかと思います。 そんなときのジャバスクリプト。js

答えはこちら下

//<iframe></iframe>
var iframe=document.querySelector('iframe')
var ihead=iframe.contentDocument.head
var ibody=iframe.contentDocument.body

ibody.innerHTML=`
<style>body{color:red;}</style>
<h1>header</h1>
`

やっていること

やっていることは、HTMLにiframeタグを一つ用意して、まず取得します。 それから「contentDocument」でアイフレームのドキュメントを取得します。 その後は、ヘッダとボディに「innerHTML」でごりごりと流し込みます。 こうすると、ヘッダにＣＳＳを入れておいて、お試し文字列をＢＯＤＹに入れると 見た目チェックに使えます。

以上、編集とプレビューを自分で実装するような話でした。