根據父級網址在iframe中更改屬性的顏色

Question

基本上，我有一個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>

如果變量“ URL”匹配並且父頁面成功將document.URL存儲到“ URL”變量中，則iframe中的代碼會成功更改<a>屬性的顏色，但似乎該變量無法被訪問iframe。

我敢肯定有一個很好的方法可以做到這一點，但是我已經沒有足夠的想法了

值得注意的是，我試圖將所有父頁面上的混亂程度降至最低（因此首先使用iframe）

謝謝！

Answer 1

Oof，Pete，您在這里充滿了痛苦。 您有兩種可能的情況：

• iFrame頁面和您的頁面位於同一域
• 他們在不同的領域

如果它們在同一域中，則應該能夠使用此處概述的方法通過JavaScript訪問內部框架，反之亦然。 令人討厭，但可行。

但是，如果目標文檔和父文檔位於不同的域上（是的， 子域被視為不同的域） ，那么您將需要做一些更具侵略性和hacky的事情。 本質上，除了設置URL外，您不能影響內部框架。 您可以通過設置URL片段（ http://www.foo.com/bar.php#fragment ）將消息傳遞到框架中的腳本。 iFrame中的腳本可以檢查URL片段並根據需要更改CSS樣式。 一個很好的方法可以在這里找到，盡管它非常復雜-祝您好運。

綜上所述，很有可能使用iFrame是錯誤的選擇。 您可以使用jQuery的ajax（）系列方法將文檔動態地直接加載到您的文檔中，CSS和JavaScript將在其中正常進行交互。 這非常容易處理，並且在樣式上更可取，並且符合引導標准。