IE10不支持iframe中的樣式錶鏈接

我擁有動態加載的iframe。這個iframe中的內容應該像它所在的頁面一樣。爲此，我將鏈接添加到了iframe頭部的css文件。它在Firefox中運行正常，但在IE10中無效。它是已知的問題嗎？IE10不支持iframe中的樣式錶鏈接

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="/js/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#dialogIframe').load(function(){ 
       $('#dialogIframe') 
         .contents().find("body") 
         .html("test iframe"); 
       $('#dialogIframe') 
         .contents().find("head") 
         .html('<link rel="stylesheet" type="text/css" href="/css/main.css">'); 
      }); 
     }); 

    </script> 
</head> 
<body> 
Test 
<iframe id="dialogIframe" style="width:300px; height:300px; border: none;"> 
</iframe> 
</body> 
</html>

http://jsfiddle.net/YwCRf/

來源

2013-08-22 Valentina Chumak

之所以這並不在IE瀏覽器，你可以找到[MSDN：innerHTML的（http://msdn.microsoft.com/en-我們/庫/ IE/ms533897％28V = vs.85％29.aspx/HTML）。 – Teemu

「不工作」總是IE的一個特點：P –

的headinnerHTML是隻讀的，只能在IE中，下面的代碼片段的伎倆：

$('#dialogIframe') 
    .contents().find("head") 
    .append($('<link rel="stylesheet" type="text/css" href="/css/main.css">') 
);

萬一有人需要用純做到這一點JavaScript，這裏是代碼：

var doc = document.getElementById('dialogIframe').contentWindow.document, 
    sheet = doc.createElement('link'); 
sheet.rel = 'stylesheet'; 
sheet.type = 'text/css'; 
sheet.href = '/css/main.css'; 
doc.documentElement.appendChild(sheet);

來源

2013-08-22 09:15:45 Teemu

+1，當然我更喜歡[Vanilla JS]（http://vanilla-js.com/）版本。 –

@Kolink所以我會，但問題中的代碼是jQuery。如果我用純JS回答，有人可能會低估答案。 – Teemu

你吮吸！沒有足夠的jQuery！根據我的經驗，XD在jQuery問題中發佈了Vanilla JS的更多+1。儘管我已經在jQuery中編寫了兩個答案，但我擁有黃金jQuery徽章。 –

我的兩分錢（更多瀏覽器兼容的）

// locate iframe 
var frameName = "dialogIframe"; 
var iframe = document.frames ? document.frames[frameName] : window.frames[frameName]; 

// create stylesheet  
var ss = iframe.document.createElement("link"); 
ss.type = "text/css"; 
ss.rel = "stylesheet"; 
ss.href = "style.css"; 

// apply to iframe's head 
document.all ? iframe.document.createStyleSheet(ss.href) : iframe.document.getElementsByTagName("head")[0].appendChild(ss);

來源

2013-08-22 09:48:13

帖子中沒有'name'屬性，所以我在回答中使用了'id'。 Anayway，您不需要檢查是否可以從'document'中找到'frames'集合，它可以在任何瀏覽器的'window'中找到，也可以在某些瀏覽器中從'document'中找到它。另外'iframe.document.getElementsByTagName（「head」）[0] .appendChild（ss）;'是一個跨瀏覽器的方法。一個問題：爲什麼我們要在'iframe'文檔中創建'link'元素，而不是放置代碼的文檔？ – Teemu

iframe數組可以通過id加以識別。你對「window.frames」是正確的。我用createStyleSheet原因是一個本地IE功能（也許更快）。關於link元素的創建，據我所知沒有區別。（在IE 11中不推薦使用createStyleSheet）這就是爲什麼我儘可能使用jquery。 –

是的，在iframe的情況下沒有區別，但是如果它是一個彈出窗口，當試圖從另一個文檔追加一個元素時，你會在IE中看到一個錯誤。 – Teemu

IE10不支持iframe中的樣式錶鏈接

回答

相關問題