Question

我试图让用户能够在Fancybox打开时打印Fancybox的内容。 Fancybox的内容是其自己的div内的Google Maps directionsPanel。基本上我想让用户能够打印他们刚刚搜索完的路线。

但是，当Fancybox未打开时，即他们正在查看包含Map的页面内容时。我希望用户能够打印页面。

我尝试使用CSS创建“可打印”和“不可打印”的代码段，但显然这违背了我的目的。

这是我目前的代码：

   <style type="text/css">

    -->#printable { display: none; }

    @media print
    {
        -->#non-printable { display: none; }
        -->#printable { display: block; }
        body * { visibility: hidden; }
        #directionsPanel * { visibility: visible; }
        #directionsPanel { position: absolute; top: 1px; left: 1px; }

    }
    </style>



  </head>
  <body onLoad="initialize()">
    <table>
        <tr>
            <td>
                <input name="start_address" id="address" type="text" value="Enter Address" onFocus="doClear(this)" size="45"/>
            </td>
        </tr>
        <tr align="center">
            <td align="center">
                <a id="portDirectionBtn" class="fancybox" href="#directionsPanel" onClick="calcRoute();">Get Directions</a>
            </td>
        </tr>
    <div id="map_canvas" style="width:300px; height:300px">
    </div>
    <div id="printable">
    <div id="directionsPanel">
        <a href="javascript:window.print();">Print!</a><br />
    </div>
    </div>
    </table>

  </body>
</html>

显然还有Fancybox和Google Maps脚本。如果该代码有用，请告诉我。任何帮助表示赞赏！

Answer 1

在iframe中打开fancybox并从里面调用print。因为它在iframe中，所以print命令只能看到它并因此打印它。如果fancybox已关闭，您可以从另一个按钮（iframe外部）调用print来打印整个页面

打开时打印Fancybox的内容，关闭时打印页面内容

1 个答案: