Trigger resize event on print

问题

I have a div in which I create a chart using protovis. The div has width: 100% and height: 100% and the code to create the chart uses $('#chart').width() and $('#chart').height() to get the size of the div at render time and fill the page with the chart. I capture the resize event on the window and adjust the div and the chart so that it resizes when the window resizes.

Now I need to print. I would have hoped that when the browser is rendering the page for the printer it issues a resize but it doesn't, at least Safari and Firefox don't. Chrome does something strange in which it resizes only the height but not the width. Is there a way to trigger this behavior just before print?

EDIT. Consider the following html

<html>
  <head>
    <title>Resize</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#chart').resize(function() {
          $(this).html('chart size is ' + $('#chart').width() + ' x ' + $('#chart').height());
        })        
      });
      $(window).resize(function() {
        $('.resizable').resize();
      });
    </script>
    <style type="text/css">
      #chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
    </style>
  </head>
  <body>

    <div id="chart" class="resizable">
    </div>

  </body>
</html>

When I resize the window the content of the div changes. When I print it the render process does not fire the resize event.

回答1:

Rather than mutating the chart properties with an event, the @media print css rule might help here. https://developer.mozilla.org/en-US/docs/Web/CSS/%40media

@media print{
  #chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
}

With this method, these style properties are applied on print, regardless what other changes you've made.

回答2:

perhaps

<style type="text/css">
      #chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
</style>

<style type="text/css" media="print">
      #chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
</style>

来源：https://stackoverflow.com/questions/3538260/trigger-resize-event-on-print

标签

javascript

jquery

html

printing

protovis