gpt4 book ai didi

javascript - iframe css src 更改,如果父 css src 更改

转载 作者:太空宇宙 更新时间:2023-11-04 14:18:43 27 4
gpt4 key购买 nike

我正在做一个随机的学校元素。

目前,我有一个包含两个 CSS 的页面。一种用于正常 View ,一种用于残障人士 View 。

<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

最佳答案

这是解决此问题的一种方法。

您可以存储 iframe网站 CSS 源作为 $_GET多变的。例如,假设您有两个文件:

  • index.php : 主页
  • iframe.php : 在 iframe 中显示的页面

现在,当您更改主页的样式表时,index.php ,您还可以调用 JavaScript 函数来更改 iframe 的源。例如,这是带有样式表 1 的原始 iframe:

<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">

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?

关于javascript - iframe css src 更改,如果父 css src 更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20107363/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com