應用CSS樣式到新的窗口，而不使用document.write

我已經打開的代碼的新窗口：應用CSS樣式到新的窗口，而不使用document.write

w = window.open("", "ventana", "status=1,width=350,height=150");

還有我創建了一個表

var tresumen = w.document.createElement("table");

等，並等等...

一切工作正常，但是當涉及到應用CSS時，我發現新窗口不讀取我從主html中引用的單獨的css文件。在CSS我有一些線table這樣的：

table { 
     some attributes here; 
}

我能想到的，以使新的窗口讀取CSS的唯一方法，就是把一個document.write的新窗口的JavaScript內，將有該html代碼引用（再次）的CSS文件，但因爲它已經在主html中引用，我不明白爲什麼這將是一個正確的方式...

這是什麼我的錯誤？

如何創建一個新窗口（沒有自己的html！）讀取主窗口正在使用的CSS？

謝謝！

來源

2012-12-16 telex-wap

爲什麼新與JS窗口？製作一個「燈箱」（谷歌它）或可能目標空白？ – user1721135

在這個特定的工作中，我需要使用js與其他代碼（已經編寫）保持一致性，但我承認lightbox很有趣。 –

如果沒有在新窗口中加載或生成實際的HTML文檔，那麼您將依賴瀏覽器的標記 - 湯解釋來理解您的標記。

也就是說，您必須將樣式或鏈接元素附加到該窗口的引用您的外部樣式表的DOM。

來源

2012-12-16 13:01:16 DanMan

嗯，你是對的......我會做一些測試，將鏈接元素添加到DOM，如果不是，我會改變我的方法。 –

您可以將樣式複製到新窗口：

var stylesheets = document.querySelectorAll('style, link[rel="stylesheet"]'); 
stylesheets = Array.prototype.slice.call(stylesheets); 
for (var i = 0; i < stylesheets.length; i++) { 
    copyStyle(window, w, stylesheets[i]); 
} 

function copyStyle(from, to, node) { 
    var doc = to.contentDocument; 
    var newStyle = doc.createElement(node.tagName); 
    if (node.textContent) { 
     newStyle.textContent = node.textContent; 
    } else if (node.innerText) { 
     newStyle.innerText = node.innerText; 
    } 
    newStyle.type = node.type; 
    newStyle.src = node.src; 
    newStyle.rel = node.rel; 
    doc.getElementsByTagName('head')[0].appendChild(newStyle); 
}

來源

2012-12-16 13:05:13 user123444555621

謝謝。對於我想要做的簡單事情來說有點過於複雜，但我保存了您的代碼。它可能在未來有用。 –

應用CSS樣式到新的窗口，而不使用document.write

回答

相關問題