jQuery で iframe 内の要素にアクセス (iframe 内の要素を取得し、親ページに配置)

※ このページでの jQuery は、Google AJAX Libraries API から Ver.1.4.* 系をロードしています。

iframe 内の要素を取得し、開いている (親) ページに配置する (iframe 内は同一サーバー)

例 ： iframe 内、class 名が classB で1番目の要素を、本ページの指定箇所に挿入

$('#blockquote00').append( $('#iframe00').contents().find('.classB:eq(0)').clone() );

実行
ソース表示

id="iframe00"

id="blockquote01"
ここに iframe 内から取得した 1番目の classB の内容が挿入されます。
でも、iframe 内のページの CSS が、この親ページで読み込まれていないので、見た目まで反映されていません。

iframe 内の要素を取得し、開いている (親) ページに配置する (iframe 内は別サーバー)

例 ： iframe 内、div タグで1番目の要素を、本ページの指定箇所に挿入

$('#blockquote01').append( $('#iframe01').contents().find('div:first').clone() );

実行 実行すると、JavaScript のセキュリティ制限でエラー (ドメインの異なるページへのアクセスは禁止)
ソース表示

id="iframe01"

id="blockquote01"
ここに iframe 内から取得した 1番目の classB の内容が挿入されます。
って書いたけど、エラーでできません。

戻る