0

我想知道是否有一个简单的解决方案可以在 iframe 中的页面上切换样式表。基本上，这就是我的想法>

<iframe name="iframe" src="page on my domain.html"></iframe>

<form id="switcher">
  <input type="button" value="Switch to style 1" />
  <input type="button" value="Switch to style 2" />
  <input type="button" value="Switch to style 3" />
</form>
4

2 回答 2

1

你可以试试这个：

<iframe id="iframe" name="iframe" src="test.html"></iframe>
<form id="switcher">
  <input type="button" value="Switch to style 1" onclick="var a=document.getElementById('iframe').contentDocument.getElementsByTagName('link');a=a[0];a.href='path/to/some.css';" />
  <input type="button" value="Switch to style 2" />
  <input type="button" value="Switch to style 3" />
</form>
于 2012-08-27T16:08:18.320 回答
0

假设安装了 jQuery：

http://www.kelvinluck.com/2009/07/jquery-styleswitch-now-with-toggle/

好的，这真的容易多了......我使用 css zen garden 来获取这个测试的样式页面：

对于您的 HTML：

<iframe name="iframe" 
   id="iframetarget" 
   src="http://www.csszengarden.com/" 
   width=400 
   height=400>
</iframe>

<form id="switcher">
  <input type="button" id="v1" value="Switch to style 1" />
  <input type="button" id="v2" value="Switch to style 2" />
  <input type="button" id="v3" value="Switch to style 3" />
</form>​

对于你的 jQuery：

$('#v1').click(function() {
    $('#iframetarget').prop({
        src: 'http://www.csszengarden.com/?cssfile=/213/213.css&amp;page=0'
    });
});
$('#v2').click(function() {
    $('#iframetarget').prop({
        src: 'http://www.csszengarden.com/?cssfile=/212/212.css&amp;page=0'
    });
});

$('#v3').click(function() {
    $('#iframetarget').prop({
        src: 'http://www.csszengarden.com/?cssfile=/211/211.css&amp;page=0'
    });
});​

这是用小提琴测试的，它可以工作：

http://jsfiddle.net/sablefoste/DbYPp/1/

于 2012-08-27T16:07:46.030 回答