用css和圖片打開新窗口

我正在做一個簡單的打印選項，當點擊我打電話打印功能。該函數複製相關的（不是全部）html。用css和圖片打開新窗口

function print() { 

var printWindow = window.open("", "Print", "status=no, toolbar=no, scrollbars=yes", "false"); 
var toInsert = $("div.book").html(); 
$(printWindow.document.body).html(toInsert); 

}

我遇到的問題是，這個新窗口似乎無法引用我的CSS樣式表或我的圖片在文件夾內。有任何想法嗎？只關注CSS問題，是否可以將<link ... />插入新窗口的頭部？

謝謝！

來源

2012-07-26 zanegray

function Print() { 
    var printWindow = window.open("", "Print", "status=no, toolbar=no, scrollbars=yes", "false"); 
    $("link, style, script").each(function() { 
     $(printWindow.document.head).append($(this).clone()) 
    }); 
    var toInsert = $("div.book").html(); 
    $(printWindow.document.body).append(toInsert); 
}

DEMO

來源

2012-07-26 23:06:18 ocanal

這個工作原理除了原來的網頁現在缺少'link'，'style'和'script'的內容（或者至少這是firefox 10.0.6的行爲）。我試過這個：'$（this）.clone（）。appendTo（$（printWindow.document.head））;'但沒有雪茄。 – zanegray 2012-07-27 16:05:12

@ zanegray，是的，你是對的，克隆的元素必須附加。我改變了它，現在看起來運行良好（對於所有瀏覽器）。 – ocanal 2012-07-27 17:14:46

這是一個全新的窗口。它必須有自己的CSS等。

當你寫一個文件到它，你必須寫在<link>標籤，<script>標籤，和其他所有的東西。

來源

2012-07-26 22:57:02 Pointy

這個答案比被接受的答案更容易理解，也更簡單。人們需要對JavaScript不太滿意！ – 2012-07-27 17:24:42

動態插入鏈接到現有的CSS樣式表到新窗口的負責人這個工作很適合我：

var cssNode = document.createElement('link'); 
cssNode.type = 'text/css'; 
cssNode.rel = 'stylesheet'; 
cssNode.href = 'http://www.somedomain.com/styles/FireFox.css'; 
cssNode.media = 'screen'; 
cssNode.title = 'dynamicLoadedSheet'; 
printWindow.document.getElementsByTagName("head")[0].appendChild(cssNode);

Source: Totally Pwn CSS with Javascript - 大約有其他一些有趣的技巧直接操作樣式表

來源

2014-08-19 16:06:35

用css和圖片打開新窗口

回答

相關問題