0

別のページotherPage.htmlを表示している html ページmyPage.htmlに iFrame があります。 otherPage.htmlは多くの要素を持つ複雑なページです。iFrame に div を 1 つだけ表示したい。他のすべては非表示のままにする必要があります。これどうやってするの？

iFrame の代わりに、jQuery で .load() 関数を使用しようとしました。しかし、何らかの理由で、ページが読み込まれません。otherPage.htmlは IIS サーバーから提供され、ページは純粋な Javascript で構成されています。load() 関数を使用すると、何もロードされない理由がわかりません。

これを達成するにはどうすればよいですか？

更新: ここにいくつかの説明があります: myPage.html で .load() 関数を使用しようとしました。とにかく、いじってみたところ、次のように動作することがわかりました。次のjQueryステートメントはこれを行うようです：

$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();

今一つだけ問題があります。私が次のことをするとき：

  • myPage.htmlを Firefox にロードします (iframe に otherPage.html もロードします)。
  • 手動でfirebugを開いて入力します

$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();

他のすべてを隠しているようです。

しかし、私はそれを自動化したい。つまり、myPage.htmlをロードするときに、iFrame のコンテンツをロードする必要があります。iFrame のコンテンツが読み込まれたら、次のスクリプトを実行します。

$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();

これを機能させることはできません。これまでに次の2つのアプローチを試しました。

$(document).ready(function() {
    $("#myFrame").ready(function () {
        $("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
    });
});

私も使ってみました

$("#myFrame").load(function () {

代わりは。ただし、どちらの場合も、スクリプトは他の要素を隠しません。スクリプトはコンソールで手動で使用すると機能するため、すべての要素がロードされる前にスクリプトが実行されていると想定しています。あなたの考えを教えてください。

4

3 に答える 3

1

load() 関数を使用していると言います。これを親ページまたは iframe ページで使用していますか? 代わりに ready() 関数を使用するつもりですか?

$(document).ready(function(){
    // some code here ...
});

ドキュメントで ready() を使用すると、DOM 要素が完全にロードされたことが保証され、ハンドラーでコードが実行されます。これ以上の情報がなければ、あなたがここでしようとしていることに私が大いに役立つかどうかわかりません.

iframe を使用する場合、最初に、1 つの div のみを表示し、他のすべてを非表示にする場合は、「表示される」div が「表示されない」コンテナー内にないことを確認する必要があることを覚えておく必要があります。コンテナが非表示の場合、すべての子も非表示になります。

div「showme」がある場合、次のようなものが機能します。

<div id="showme">visible text</div>
<div style="display:none;">hidden text</div>

しかし、このようにすると、すべてが隠されます。

<div style="display:none;">
    hidden text
    <div id="showme">supposed to be visible, but hidden!!</div>
</div>

要素の可視性または表示を変更する場合は、次のように iframe ページで行うことができます。

// using jQuery...
// set the display css to an empty string, defaulting to visible (not 'none')
$('#showme').css('display','');

// set other elements to be hidden...
$('#hideme1').css('display','none');
$('#hideme2').css('display','none');
$('#hideme3').css('display','none');

PARENT ページから要素の可視性を変更する場合は、最初に iframe にアクセスしてから、その中の要素を変更します。

// using jQuery...
// get the iframe.  ps. you dont have to put the $ in front of the variable name.
// I chose to do it this way to remind myself it's a jQuery object.
var $f = $('#myiframe').contents();

// set the display css to an empty string, defaulting to visible (not 'none')
$f.find('#showme').css('display','');

// set other elements to be hidden...
$f.find('#hideme1').css('display','none');
$f.find('#hideme2').css('display','none');
$f.find('#hideme3').css('display','none');

子 iframe 内の要素を操作する例については、この記事を参照してください。

http://www.computerhowtoguy.com/jquery-and-iframes/

于 2012-11-08T05:05:50.290 に答える
1

  • のようなもので iFrame 内のすべてを非$("#myIFrame *").hide();表示にするか、css 表示プロパティを none に設定できます。

  • CSS セレクターを使用して、必要な div のみを再表示します。div に id がある場合、これは非常に簡単です。$('#myDiv').show();

div に ID がない場合は、指定できるかどうかを確認してください。div の ID を作成できない場合は、その親に ID/クラスを指定してみてください。

ID がオプションでない場合は、同様のセレクターが:nth-child()役立つ場合もあります。

于 2012-11-08T04:18:47.567 に答える
0

私はあなたの質問を理解しました。このようにして、div id を渡して otherPage.html URL にハッシュとして表示されるようにします。divwith idがあるようにfirst、最初にハッシュとして渡すことができます。

<iframe src="otherPage.html#first" />

でotherPage.html、これを取得しhash、それに従って div を表示できますが、最初にすべてのセクションを非表示にします。css を使用するのは簡単です。css を追加するだけ"display:none;"です。

これを試してください：でotherPage.html

$(function(){
   //var divToShow = location.hash.subString(1);
   //$('#'+divToShow).show();
   var divToShow = location.hash;
   $(divToShow).show();
});
于 2012-11-08T04:24:40.570 に答える