4

特定の ID を持つ要素の属性を変更する GreaseMonkey スクリプトを作成していますが、従来とは異なる HTML 階層が原因でアクセスに問題があります。関連する HTML は次のとおりです。

<body>
...
    <iframe id="iframeID">
        <html>
        ...
            <body id="bodyID" attribute="value">
            ...
            </body>
        ...
        </html>
    </iframe>
...
</body>

attribute変更しようとしている属性はどこですか。

iframe最初は、ネストされたタグで作業していることに気付かずbody、これを試しました：

document.getElementById('bodyID').setAttribute("attribute","value")

これは Firefox では問題なく動作しましたが、Chrome では の属性を設定できないと表示されnull、id を持つ要素が見つからないことが示唆されますbodyID。この属性をクロスブラウザフレンドリーな方法で変更するにはどうすればよいですか?

4

2 に答える 2

9

まず、次のドキュメントをプルする必要があります<iframe>。

document.getElementById('iframeID').contentDocument
.getElementById('bodyID').setAttribute("attribute","value");

ライブデモ

ところで、ノードを取得したい場合は<body>、id などを指定する必要はありません。単純に:

document.body

あなたの場合、それはのドキュメントです<iframe>：

document.getElementById('iframeID').contentDocument.body.setAttribute("attribute","value");

はるかに簡単です...そうではありませんか？

于 2012-06-30T21:22:25.860 に答える
1

これを行うための最良の方法であるIMOはload、iFrameによって発生したイベントをリッスンし、必要に応じてiFrameDOMを調べることです。これにより、必要なときにiFrame DOMを使用できるようになり、しばらく時間がかかることが保証されます。

$('#iframeID').on('load', function ()
{
  alert('loaded'); // iFrame successfully loaded
  var iFrameDoc = $('#iframeID')[0].contentDocument; // Get the iFrame document
  $('body', iFrameDoc).attr('attribute', 'new value'); // Get the 'body' in the iFrame document and set 'attribute' to 'new value'
});
于 2012-06-30T21:41:12.430 に答える