iframe-css-src更改,如果父css src更改
iframe css src change, if parent css src changes
我正在做一个随机的学校项目。
目前,我有一个包含两个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标记。
EDIT:不幸的是,我只能使用HTML5、XHTML Strict、jQuery/java
这里有一种方法。
您可以将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">';
}
我还没有测试过这个代码,但理论上它应该可以正常工作。当然,我相信还有很多其他方法可以解决这个问题,只受你的独创性的限制。这是一种方法。如果你遇到任何问题,请告诉我。
更新:
第二种方法(按照OP的要求,不使用PHP)是类似的,但您可以使用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";
}
同样,这个代码没有经过测试,但我希望这个理论对你来说是清楚的。第二种方法的参考可以在这里找到:直接从JavaScript访问GET?
- 使用javascript单击同一按钮,在两种样式之间更改css值
- JavaScript在更改css时停止工作
- 更改CSS以允许使用Javascript控制DIV位置
- 使用AngularJS动态更改css属性
- 更改css链接并等待加载新的css
- Javascript:动态更改CSS文件+Cookie
- 根据Meteor集合中的元素数量更改css
- 如何使用Angular2在点击时切换选项卡和更改css类
- 如果类中的数字大于0,请使用JavaScript更改CSS背景
- 更改css子元素导航树
- Javascript-如何更改css类的属性
- 我想让用户使用可选面板更改 CSS.我应该怎么做
- 根据小时和分钟更改 CSS
- 在 Javascript 中更改 CSS 子类的值
- 我可以更改CSS中文本区域调整大小句柄的设计吗
- 使用JS更改css
- 使用Jquery和JS更改CSS
- 使用JavaScript更改CSS类名
- 使用javascript变量更改css背景颜色
- 如何使用js有条件地更改css样式