1

次のスクリプトを使用して、親ページに動的に挿入されるiframeがあります（このドメインを制御することはできません）。

var _hf_iFrame = document.createElement("iframe");
_hf_iFrame.setAttribute("id", "_hf_iFrame");
_hf_iFrame.setAttribute("name", "_hf_iFrame");
_hf_iFrame.setAttribute("style", "height: 354px; width: 445px; border: 0; margin-left: -400px; top: 23%; position: fixed;");
document.body.appendChild(_hf_iFrame);
_hf_iFrame.setAttribute("src", "http://anotherdomain.com/frame.html");

iframe自体からiframeのcssプロパティを変更したい。これを達成することは可能ですか？iframe内でJQueryを使用しています。

前もって感謝します。

4

3 に答える 3

2

残念ながら、このクロスドメインを実行することはできません。私はそれをさまざまな方法で操作しようとしましたが、すべて失敗しました。ユーザースクリプトを喜んで使用するコミュニティがある場合は、それがオプションになる可能性があります。そうでなければ、あなたが求めていることは不可能です。

ユーザースクリプト

ユーザースクリプトは、javascript（およびそれに付属する任意のライブラリ）のスクリプトです。ユーザーはブラウザにインストールすることを選択できます。FireFoxとOperaはそれを完全にサポートしていますが、FireFoxにはGreasemonkeyという名前の拡張機能が必要です。Chromeには1つの小さな例外があります。ライブラリがページでアクティブでない場合は、ライブラリとコードをドキュメント自体に追加する必要があります。もしそうなら、他のブラウザと同じように使用できます。Safariについてはよくわかりませんが、IEはSafariをまったくサポートしていません。

ユーザースクリプトに関する情報は次のとおりです。をクリックします。このガイドが示すように：Safariはアドオンでサポートされており、IEもサポートされていますが、IE9/10については何も述べていません。アイデアのランダムなユーザースクリプトを確認するには、userscripts.orgにアクセスしてください。

ドメインが同じ場合は、以下を参照してください。

古い答え

iFrame内からトップレベルのドキュメントにアクセスすることができます。これはプレーンなJavaScriptです。iFrameは動的に作成されるため、1ページにさらに多くのページが表示される可能性があります。このスクリプトも適切なフレームを取得します。

var arrFrames = parent.document.getElementsByTagName("iframe");
for (var i = 0; i < arrFrames.length; i++) {
    if (arrFrames[i].contentWindow === window) alert("yay!");
    {
        arrFrames[i].contentWindow.style.border = "1px solid lime";
    }
}

そしてjQueryでは：

parent.$("iframe").each(function(iel, el) {
    if(el.contentWindow === window)
    {
        $(this).css({"border" : "1px solid lime"});
    }
});

これは私のコードではありません。このオリジナルはここにあります。CSS部分用に編集しました。答えはいつもそこにあるので、次回はもう少し検索するかもしれません！

于 2012-10-17T06:28:14.147 に答える
1

あなたはこれを行うことはできません。

2つのドキュメントがあります。親と額装。iframe要素は親内に存在するため、変更するには親ドキュメントを変更する必要があります。

コードは別のドメインにあるフレーム化されたドキュメントで実行されるため、同一生成元ポリシーにより、親ドキュメントにアクセスして変更することはできません。

于 2012-10-17T06:37:26.403 に答える
0

私があなたを正しく理解しているなら、あなたはフレームに何かが起こったときにフレームのスタイルを変更したいと思うでしょう。

jQueryセレクターと.on関数を使用して、フレーム内の各要素に関数をバインドできます。

$('#myFrame).contents().find('myButton').on('click',function(){
    $('#myFrame).contents().find('myDiv').attr('style','background-color:red'); 
});

このコードを実行している場合は、フレームをロードする前に、次のバインディング手法を使用する必要があることに注意してください。

$('#myFrame).contents().find('myButton').on('click','#myFrame',function(){
    $('#myFrame).contents().find('myDiv').attr('style','background-color:red'); 
});

要素がレンダリングされないイベントイベントをバインドします。とにかく、フレームロードイベントでイベントをバインドすると思います。

上記では、ドキュメントにjQueryをロードする必要があります。

于 2012-10-17T06:33:45.620 に答える