iframe css src改變，如果父css src改變

Question

我正在一個隨機的學校項目。

目前，我有一個包含兩個CSS的頁面。一個用於正常視圖，另一個用於殘疾人視圖。

<link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> 
<link rel="stylesheet" type="text/css" href="css/gyengen.css" title="alt" media="screen"> 

此頁面還包含兩個按鈕，用於更改使用的樣式表。

function changeStyle(main) { 
var lnks = document.getElementsByTagName('link'); 
for (var i = lnks.length - 1; i >= 0; i--) { 
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) { 
lnks[i].disabled = true; 
if (lnks[i].getAttribute('title') == main) lnks[i].disabled = false; 
}}} 

<div class="gyengen"> 
<span onclick="changeStyle('main')" class="normal"><img src="css/pictures/inverse.png" alt="Normál stíluslap"></span> 
<span onclick="changeStyle('alt')" class="inverse"><img src="css/pictures/inverse.png" alt="Inverz stíluslap"></span> 
</div> 

我有一個鏈接到iframe目標，如果點擊特定位置的圖像映射。

<area shape="poly" coords="329,130,342,57,389,45,441,58,481,86,514,148,481,173,453,166,443,199,409,222,370,283,337,278,332,225,331,140" href="zones/gorgrond.html" alt="Gorgrond" title="Gorgrond" target="zone"> 

<iframe name="zone" onload='javascript:resizeIframe(this);'></iframe> 

這兩個網站是在同一個域名。 我想實現的是，如果我用上面提到的方法更改父窗口的樣式表，我也想更改iframe的CSS源代碼。鏈接到iframe的網站與父窗口具有相同的html標記。

編輯：不幸的是，我只允許使用HTML5，XHTML嚴格，jQuery的/ JAVA

Answer 1

這裏是解決這個的一種方式。

您可以將iframe網站CSS源代碼存儲爲$_GET變量。例如，假設你有兩個文件你已經是：

• index.php：主頁
• iframe.php：頁面中的iframe顯示現在

當您更改主頁的樣式表，index.php，您也可以調用JavaScript函數來更改iframe的來源。例如，這是你原來的iframe中，使用樣式表1：

<iframe id="iframe" src="iframe.php?stylesheet=1"></iframe> 

然後，在你changeStyle功能，您可以用getElementById改變頁面的源代碼中的iframe，像這樣：

document.getElementById("iframe").src = "iframe.php?stylesheet=2"; 

在這裏，您可以處理在iframe.php使用在服務器端PHP要使用的樣式表：

$stylesheet = $_GET["stylesheet"]; 
if($stylesheet == 1) { 
    echo '<link rel="stylesheet" type="text/css" href="stylesheet1.css" title="main" media="screen">'; 
elseif($stylesheet == 2) { 
    echo '<link rel="stylesheet" type="text/css" href="stylesheet2.css" title="main" media="screen">'; 
} 

我沒有測試此代碼，但是理論上應該工作正常。當然，我敢肯定還有其他多種方法可以解決這個問題，只受到您的獨創性的限制。這是做到這一點的一種方法。如果遇到任何問題，請告訴我。

更新：

第二種方式來處理這個（不使用PHP，因爲OP要求）是相似的，但你可以處理使用JavaScript，而不是PHP的URL。看看window.location.search。它會返回一個像這樣的字符串：

?foo=1&bar=2 

然後你就可以分手使用JavaScript，就像這樣：

var parts = window.location.search.substr(1).split("&"); 
var $_GET = {}; 
for (var i = 0; i < parts.length; i++) { 
    var temp = parts[i].split("="); 
    $_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]); 
} 

alert($_GET['foo']); // 1 
alert($_GET.bar); // 2 

將此應用於我們的情況，您可以使用更改樣式<link>源JavaScript中，像這樣：

HTML：

<link id="main_stylesheet" rel="stylesheet" type="text/css" href="" title="main" media="screen"> 

JavaScri PT：

if($_GET['stylesheet'] == "1") { 
    document.getElementById('main_stylesheet').href = "stylesheet1.css"; 
} 
else if($_GET['stylesheet'] == "2") { 
    document.getElementById('main_stylesheet').href = "stylesheet2.css"; 
} 

同樣，這段代碼沒有進行測試，但我希望理論是清晰的給你。第二種方法的參考可以在這裏找到：Access GET directly from JavaScript?