打印時不要使用jQuery DOM更改

我使用的是fullpage.js jQuery插件，它不幸也會影響網頁的打印，只顯示當前的視口顯示及其兄弟。

我遇到的問題是打印命令使用DOM（顯然），但插件已經在DOM中內聯CSS更改。有沒有辦法可以禁用print的DOM更改？

這並不工作，但這裏是我的想法：

$(document).ready(function() { 
    if(@media !print) { // PS: Not real code! 
     $('#fullpage').fullpage(); 
    } 
});

------ CSS解決方案-------

Praveen's reply引導我正確的軌道上。覆蓋fullpage.js所需的CSS內嵌樣式是：

/* Override javascript inline styles */ 
html, 
body { 
    overflow: visible !important; 
    height: auto !important; 
} 

.fullpage-wrapper { 
    height: auto !important; 
    transform: none !important; 
    transition: none !important; 
} 

.fp-section { 
    height: auto !important; 
} 

.fp-slidesContainer { 
    width: auto !important; 
    transition: none !important; 
    transform: none !important; 
} 

.fp-slides, 
.fp-slides * { 
    position: static !important; 
} 

.fp-slide { 
    width: auto !important; 
}

來源

2015-08-17 Eystein

爲什麼會一個關心現在的印刷？ – OddDev

@OddDev由於可用性。即使你或我從不打印，也不代表別人不打印。 – Eystein

即使你或我從不使用IE6，也不意味着其他人不會。將無限項目添加到此列表中;） – OddDev

做這樣的事情在你的CSS：

隱藏整頁幻燈片：

.fp-slides { 
    display: none; 
}

或者使他們靜態的，因爲這會通過正常渲染內容來實現：

.fp-slides, .fp-slides * { 
    position: static !important; 
    /* I don't like putting !important, 
    but there is no other way to override the inline styles without this!*/ 
}

否則，您可以指定樣式表只screen申請成爲媒體：

<link rel="stylesheet" href="fullpage.css" media="screen" />

來源

2015-08-17 07:50:02

這讓我朝着正確的方向 - 答案是在CSS中，而不是在JavaScript中。我修改了我的帖子以包含解決方案。 – Eystein

-1

您可以使用一個標誌，並設置其真時打印功能被稱爲：

var flag = false; 
$(document).ready(function() { 
    if(flag === false) { 
    // all your code 
    } 


    function toPrint() { 
    flag = true; 
    window.print(); 
    } 
});

來源

2015-08-17 07:50:18

打印時不要使用jQuery DOM更改

回答

相關問題