javascript - Iframe の内部要素の取得

Question

私は単純なhtmlページを持っています。他のサイトへのiframeがあります。そのiframeにネストされているアンカータグの色を変更したいです。javascriptを介してIframeの要素にアクセスすることが可能です

score 1 · Accepted Answer

別のページが別のドメインにある場合、クロスドメインセキュリティのため、メインページから iframe の HTML コンテンツを編集することはできません。

これには、変更したい内容を URL に書き込むなどの回避策があります。しかし、これは本当に汚いです。

同じドメインにある場合は、例として次を使用することをお勧めします。

$('div', $('iframe')[0].contentWindow.document)

iframe 内のすべての div 要素を取得するため

score 1 · Accepted Answer

次のコードを使用してそれを行いました

function loadFrame(){ document.getElementById('pcl_frame').contentWindow.document.getElementsByTagName('a')[0].style.color='blue'; }

score 0 · Accepted Answer

iframe 内のコンテンツを所有している場合にのみ機能するシンプルなソリューションが 1 つだけあります。

親ソースに次を追加します。

<script type="text/javascript">
    var innerDocument = null;
</script>

iframe に次を追加します。

<script type="text/javascript">
    parent.innerDocument = document;
</script>

iframe が読み込まれると、innerDocument を使用して iframe のドキュメントをターゲットにできるようになりました。これにより、クロスドメインセキュリティが回避されます。

score 0 · Accepted Answer

JavaScript が必要です。親ページで行うのと同じですが、JavaScript コマンドの前に iframe の名前を付ける必要があります。

同じ発信元ポリシーが適用されるため、これを行うことができるのは iframe が独自のサーバーからのものであることに注意してください。

frame1.$('mydiv').style.border='1px solid #000000'

また

frame1.$('mydiv').addClassName('withborder')

score 0 · Accepted Answer

を使用して、iframe 内の要素の値を取得できます。

 $('#iframeId').contents().find('#id-of-element-inside-iframe');

ただし、値を変更することはできません。

5 に答える 5