Javascript打印div在Safari中不工作_Javascript_Html_Css_Safari

Javascript打印div在Safari中不工作

javascript html css safari

Javascript打印div在Safari中不工作,javascript,html,css,safari,Javascript,Html,Css,Safari,我有一个Javascript函数，可以打印网页中两个元素的内容。它可以在Chrome、Firefox和IE中使用，但Safari只会弹出一个空窗口，如果我选择打印，它只会打印一个空白页面 <body> <input type="button" id="popup" value="Open Popup" /> <div id="yourContract"> <div>blablabla</div>

我有一个Javascript函数，可以打印网页中两个元素的内容。它可以在Chrome、Firefox和IE中使用，但Safari只会弹出一个空窗口，如果我选择打印，它只会打印一个空白页面

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

这是我的密码：

var content = "<!doctype html><html><head>";
content += '<link rel="stylesheet" href="/css/normalise.css" type="text/css" />';
content += '<link rel="stylesheet" href="/App_Themes/CS2011/StyleSheet.css" type="text/css" />';
content += "</head><body>";


//Find the div to insert the rest of the html after
var contractToFind = $(divElement).parent().find("div").get(0);

//Insert rest of code
content += contractToFind.innerHTML;
content += "</body></html>";

//Set up print window and print
var printWindow = window.open('', '', params);   
printWindow.document.write(content);
printWindow.document.close();
printWindow.focus();
printWindow.print();

//Close the window
printWindow.close();

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

我找到了解决这个问题的办法。问题在于，

window.print（）

不是所有浏览器的标准，Safari在触发它时可能会采用不同的方法

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

我对你的代码做了一些修改，所以这个解决方案可能不适合你，但它适用于所有浏览器（在Safari、FF、Chrome和IE8上测试）

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

请注意，您需要为弹出内容设置一个不同的页面（我更改了代码以检索合同，为自己制作了一个示例，希望您能够了解如何获取合同内容）

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

守则： 用于打开弹出窗口的页面的HTML

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

它是如何工作的：

static.html

由两个

script

部分组成。正文中的部分通过javascript加载页面中的内容

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

头部的部分通过将

holdReady

设置为

true

来防止文档触发

ready

状态。然后它加载

print.js

，等待文档准备就绪，但我们将决定确切的时间，因为我们正在阻止它

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

脚本包含在页面中后，

holdReady

再次设置为false，触发

ready

状态以记录并调用

窗口上的print（）
和close（）
函数
<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

但是，这会在浏览器加载所有页面内容后发生，因此您将在弹出页面和打印对话框中看到预览
<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

希望这个解决方案就是您所需要的。
一般来说，我认为最好避免document.write（）
。是否可以选择执行printWindow.document.body.innerHTML=content？我必须补充一点，我对弹出窗口没有太多经验。这个问题的最终解决方案是什么？
<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>