Question

我尝试了代码（代码未正确运行），或者您可以直接复制粘贴并在文本编辑器上运行。如果可以用jquery更改，建议我。

<!DOCTYPE html>
<html>
   <head>
      <title></title>
   </head>
   <script language="javascript">
      function PrintMe(DivID) {
        alert("here");
      var disp_setting="toolbar=yes,location=no,";
      disp_setting+="directories=yes,menubar=yes,";
      disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
         var content_vlue = document.getElementById(DivID).innerHTML;
         var docprint=window.open("","",disp_setting);
         docprint.document.open();
         docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
         docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
         docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
         docprint.document.write('<head><title>My Title</title>');
         docprint.document.write('<style type="text/css">body{ margin:0px;');
         docprint.document.write('font-family:verdana,Arial;color:#000;');
         docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
         docprint.document.write('a{color:#000;text-decoration:none;} </style>');
         docprint.document.write('</head><body onLoad="self.print()"><center>');
         docprint.document.write(content_vlue);
         docprint.document.write('</center></body></html>');
         docprint.document.close();
         docprint.focus();
      }
   </script>
   <style type="text/css">
      .hidden {
      display: none;
      }
   </style>
   <body>
      <script>
         var myWindow;

         function openWin(DivID) {
            var content_print=document.getElementById(DivID).innerHTML;
             myWindow = window.open("", "myWindow", "width=1000,height=1000");
             myWindow.document.write(content_print);
         }

         function closeWin() {
             myWindow.close();
         }
      </script>
      <div id="divid" class="hidden">
         Print the content of this div content in new window.
         <button type="button" onclick="PrintMe('divid')">Print</button>
      </div>
      <button onclick="openWin('divid')">Submit</button>
      <button onclick="closeWin()">Close</button>
   </body>
</html>

起初，我的普通页面加载：

当我单击“提交”按钮时，将打开一个新窗口，其内容为id =“ divid” 。它显示为：

它向我显示错误，例如：

Answer 1

发生这种情况是因为弹出窗口是一个新的唯一文档，并且它对原始页面上的代码一无所知。您需要将功能添加到新窗口中。如果将脚本添加到用于生成新窗口的div中，则应该没问题，但这不是打印内容的最佳方法，请考虑使用功能print()

    <div id="divid" class="hidden">
         <script language="javascript">
      function PrintMe(DivID) {
        alert("here");
      var disp_setting="toolbar=yes,location=no,";
      disp_setting+="directories=yes,menubar=yes,";
      disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
         var content_vlue = document.getElementById(DivID).innerHTML;
         var docprint=window.open("","",disp_setting);
         docprint.document.open();
         docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
         docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
         docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
         docprint.document.write('<head><title>My Title</title>');
         docprint.document.write('<style type="text/css">body{ margin:0px;');
         docprint.document.write('font-family:verdana,Arial;color:#000;');
         docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
         docprint.document.write('a{color:#000;text-decoration:none;} </style>');
         docprint.document.write('</head><body onLoad="self.print()"><center>');
         docprint.document.write(content_vlue);
         docprint.document.write('</center></body></html>');
         docprint.document.close();
         docprint.focus();
      }
   </script>
         Print the content of this div content in new window.
         <button type="button" onclick="PrintMe('divid')">Print</button>
      </div>

Answer 2

这可能会解决您的问题：您可以一起摆脱printMe（）函数，也可以通过写入MyWindow文档的函数将printMe（）函数传递给MyWindow。

<script>
         var myWindow;

         function openWin(DivID) {
            var content_print=document.getElementById(DivID).innerHTML;
             myWindow = window.open("", "myWindow", "width=1000,height=1000");
             myWindow.document.write(content_print);


             //print the window
              myWindow.print();
         }

         function closeWin() {
             myWindow.close();
         }
      </script>

“打印”按钮不适用于javascript以打印页面内容

2 个答案: