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 に答える