1

基本的に、私は自分のウェブサイトのすべてのページにロードする iframe を持っています。<ul>この中には、と<li>タグを使用してコード化されたナビゲーション バーを含むヘッダーがあります。例えば。

<div id="header">   
  <ul>
    <li><a id="BtnHome" href="/home">Home</a></li>
    <li><a id="BtnServices" href="/services">Services</a></li>
    <li><a id="BtnProducts" href="/products">Products</a></li>
    <li><a id="BtnAbout" href="/about">About Us</a></li>
    <li><a id="BtnBlank" href="#">Something</a></li>
  </ul>
</div>

<a>ヘッダーがそれぞれのページに読み込まれるときに、属性の背景色を変更する必要があります。私がこれまでに得た最も近いものは、これを使用することです..

親ページ:

<script type="text/javascript">
  var URL = document.URL;
  URL = URL.toUpperCase();
</script>

そしてiframeで：

<script type="text/javascript">
  if (URL.indexOf("/HOME") != -1) {document.getElementById("BtnHome").style.backgroundColor="#222";}
  if (URL.indexOf("/SERVICES") != -1) {document.getElementById("BtnServices").style.backgroundColor="#222";}
  if (URL.indexOf("/PRODUCTS") != -1) {document.getElementById("BtnProducts").style.backgroundColor="#222";}
  if (URL.indexOf("/ABOUT") != -1) {document.getElementById("BtnAbout").style.backgroundColor="#222";}
</script>

<a>変数「URL」が一致し、親ページが「URL」変数に正常に格納されている場合、iframe のコードは属性の色を正常に変更しますが、document.URLiframe から変数にアクセスできないようです。

これを行う良い方法があると確信していますが、アイデアが不足しています

すべての親ページで混乱を最小限に抑えようとしていることに注意してください (したがって、最初に iframe を使用します)。

ありがとうございました！

4

1 に答える 1

0

おっと、ピート、あなたはここで傷の世界にいる. 次の 2 つの状況が考えられます。

  • iFrame のページとあなたのページは同じドメインにあります
  • それらは異なるドメインにあります

それらが同じドメインにある場合は、ここで概説されている方法を使用して、JavaScript を介して内側のフレームにアクセスできるはずです。不快ですが、実行可能です。

ただし、ターゲット ドキュメントと親ドキュメントが異なるドメインにある場合 (つまり、サブドメインは異なるドメインとしてカウントされる場合) 、より攻撃的でハックな操作を行う必要があります。基本的に、URL を設定する以外に内部フレームに影響を与えることはできません。URL フラグメント ( http://www.foo.com/bar.php#fragment ) を設定することで、フレーム内のスクリプトにメッセージを渡すことができます。iFrame 内のスクリプトは、URL フラグメントをチェックし、必要に応じて CSS スタイルを変更できます。これを行うための良い方法はここにありますが、非常に複雑ですが、頑張ってください。

とは言っても、iFrame を使用することが間違っている可能性は非常に高いです。jQuery の ajax() ファミリのメソッドを使用して、ドキュメントを直接ドキュメントに動的にロードできます。この場合、CSS と JavaScript は通常どおりドキュメントと対話します。これは、スタイル的にも好ましいだけでなく、起動するのに標準に準拠しているだけでなく、はるかに簡単です。

于 2012-08-15T03:30:22.937 に答える