使用javascript加载脚本和CSS的更好方法_Javascript_Asp.net Core_Kendo Ui

使用javascript加载脚本和CSS的更好方法

javascript asp.net-core kendo-ui

使用javascript加载脚本和CSS的更好方法,javascript,asp.net-core,kendo-ui,Javascript,Asp.net Core,Kendo Ui,我在一个页面上生成一些telerik报告，当用户单击“打印”时，我想打印这些报告。我想有一个弹出窗口，其中有一个打印对话框的原始报告相同的内容。我目前的方法是使用document.write复制head元素。问题是，由于head元素包含script src，它加载外部脚本（也加载css），当打印对话框出现时，页面是空白的。我想确保在触发打印对话框之前，首先在此新页面上加载所有内容。我该怎么做？下面是我的代码： function printElem(elem) { var mywindow

我在一个页面上生成一些telerik报告，当用户单击“打印”时，我想打印这些报告。我想有一个弹出窗口，其中有一个打印对话框的原始报告相同的内容。我目前的方法是使用document.write复制head元素。问题是，由于head元素包含script src，它加载外部脚本（也加载css），当打印对话框出现时，页面是空白的。我想确保在触发打印对话框之前，首先在此新页面上加载所有内容。我该怎么做？下面是我的代码：

function printElem(elem) {
    var mywindow = window.open('', 'PRINT', 'height=600,width=800');

    mywindow.document.write('<html><head>' + document.head.innerHTML + '</head><body>');
    mywindow.document.write('<h1>' + document.title + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.print();
    return true;
}

函数printElem（elem）{
var mywindow=window.open（“”，'PRINT'，'height=600，width=800'）；
mywindow.document.write（“”+document.head.innerHTML+“”）；
mywindow.document.write（“”+document.title+“”）；
mywindow.document.write（document.getElementById（elem.innerHTML）；
mywindow.document.write（“”）；
mywindow.print（）；
返回true；
}

不幸的是，没有办法建立一个您将在

窗口中显示的页面。打开。

您有两个选项

首先，您可以显示一个加载视图，该视图将在加载所有其他元素后隐藏。如果您致力于打开另一个弹出窗口，这可能是最优雅的解决方案

<div id="loader"><img src="loading.gif /></div>
<div id="content" style="display:none">Stuff to print</div>
<script>
  <!-- I know jQuery is taboo nowadays, but you get the idea -->
  $(function() {
    $('#loader').hide();
    $('#pagecontent').show();
  });
</script>

如果您愿意放弃弹出窗口，另一个技巧是在页面上使用特定于打印的样式

<style>
@media print {
  /* Hide everything you don't need here */
}
</style>


@媒体印刷品{
/*把你不需要的东西都藏在这里*/
}

您可以在新窗口上使用onload事件

function printElem(elem) {
    console.log('new window')
    var mywindow = window.open('', 'PRINT', 'height=600,width=800');

    // Add this function here
    function printWindow(){
      console.log('loaded my window');
      mywindow.print();
    } 

    // call it once the new window is loaded.
    mywindow.document.onload = printWindow();

    mywindow.document.write('<html><head>' + document.head.innerHTML + '</head><body>');
    mywindow.document.write('<h1>' + document.title + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    return true;
}

函数printElem（elem）{
console.log（'新窗口'）
var mywindow=window.open（“”，'PRINT'，'height=600，width=800'）；
//在此处添加此函数
函数printWindow（）{
log（'loaded my window'）；
mywindow.print（）；
} 
//加载新窗口后调用它。
mywindow.document.onload=printWindow（）；
mywindow.document.write（“”+document.head.innerHTML+“”）；
mywindow.document.write（“”+document.title+“”）；
mywindow.document.write（document.getElementById（elem.innerHTML）；
mywindow.document.write（“”）；
返回true；
}

这可能会有帮助。

为什么不使用两种样式？一个用于打印，另一个用于其他设备？然后，您不需要复制文档，用户可以从浏览器的打印菜单直接打印是的，直接使用打印对话框可能更好。我这么做的主要原因是因为我想隐藏页面上不需要的其他东西。我不知道这是一个选择。我试试看。

function printElem(elem) {
    console.log('new window')
    var mywindow = window.open('', 'PRINT', 'height=600,width=800');

    // Add this function here
    function printWindow(){
      console.log('loaded my window');
      mywindow.print();
    } 

    // call it once the new window is loaded.
    mywindow.document.onload = printWindow();

    mywindow.document.write('<html><head>' + document.head.innerHTML + '</head><body>');
    mywindow.document.write('<h1>' + document.title + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    return true;
}