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 Strict，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

将此应用于我们的情况，您可以使用JavaScript更改样式表<link>的来源，如下所示：

HTML：

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

JavaScript的：

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?

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

1 个答案: