可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

This is my code

<script>
var body = \"dddddd\"    
var script = \"<script>window.print();</scr\'+\'ipt>\";

var newWin = $(\"#printf\")[0].contentWindow.document; 
newWin.open();
newWin.close();

$(\"body\",newWin).append(body+script);

</script>
<iframe id=\"printf\"></iframe>

This works but it prints the parent page, how do I get it to print just the iframe?

回答1:

I would not expect that to work

try instead

window.frames[\"printf\"].focus();
window.frames[\"printf\"].print();

and use

<iframe id=\"printf\" name=\"printf\"></iframe>

Alternatively try good old

var newWin = window.frames[\"printf\"];
newWin.document.write(\'<body onload=\"window.print()\">dddd</body>\');
newWin.document.close();

if jQuery cannot hack it

Live Demo

回答2:

document.getElementById(\"printf\").contentWindow.print();

Same origin policy applies.

回答3:

Easy way (tested on ie7+, firefox, Chrome,safari ) would be this

//id is the  id of the iframe
function printFrame(id) {
            var frm = document.getElementById(id).contentWindow;
            frm.focus();// focus on contentWindow is needed on some ie versions
            frm.print();
            return false;
}

回答4:

an alternate option, which may or may not be suitable, but cleaner if it is:

If you always want to just print the iframe from the page, you can have a separate \"@media print{}\" stylesheet that hides everything besides the iframe. Then you can just print the page normally.

回答5:

You can use this command:

document.getElementById(\'iframeid\').contentWindow.print();

This command basically is the same as window.print(), but as the window we would like to print is in the iframe, we first need to obtain an instance of that window as a javascript object.

So, in reference to that iframe, we first obtain the iframe by using it\'s id, and then it\'s contentWindow returns a window(DOM) object. So, we are able to directly use the window.print() function on this object.

回答6:

I had issues with all of the above solutions in IE8, have found a decent workaround that is tested in IE 8+9, Chrome, Safari and Firefox. For my situation i needed to print a report that was generated dynamically:

// create content of iframe
var content = \'<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\" xml:lang=\"en\">\'+
\'<head><link href=\"/css/print.css\" media=\"all\" rel=\"stylesheet\" type=\"text/css\"></head>\'+
\'<body>(rest of body content)\'+
\'<script type=\"text/javascript\">function printPage() { window.focus(); window.print();return; }</script>\'+
\'</body></html>\';

Note the printPage() javascript method before the body close tag.

Next create the iframe and append it to the parent body so its contentWindow is available:

var newIframe = document.createElement(\'iframe\');
newIframe.width = \'0\';
newIframe.height = \'0\';
newIframe.src = \'about:blank\';
document.body.appendChild(newIframe);

Next set the content:

newIframe.contentWindow.contents = content;
newIframe.src = \'javascript:window[\"contents\"]\';

Here we are setting the dynamic content variable to the iframe\'s window object then invoking it via the javascript: scheme.

Finally to print; focus the iframe and call the javascript printPage() function within the iframe content:

newIframe.focus();
setTimeout(function() {
  newIframe.contentWindow.printPage();
}, 200);
return;

The setTimeout is not necessarily needed, however if you\'re loading large amounts of content i found Chrome occasionally failed to print without it so this step is recommended. The alternative is to wrap \'newIframe.contentWindow.printPage();\' in a try catch and place the setTimeout wrapped version in the catch block.

Hope this helps someone as i spent a lot of time finding a solution that worked well across multiple browsers. Thanks to SpareCycles.

EDIT:

Instead of using setTimeout to call the printPage function use the following:

newIframe.onload = function() {
    newIframe.contentWindow.printPage();
}

回答7:

At this time, there is no need for the script tag inside the iframe. This works for me (tested in Chrome, Firefox, IE11 and node-webkit 0.12):

<script>
window.onload = function() {
    var body = \'dddddd\';
    var newWin = document.getElementById(\'printf\').contentWindow;
    newWin.document.write(body);
    newWin.document.close(); //important!
    newWin.focus(); //IE fix
    newWin.print();
}
</script>

<iframe id=\"printf\"></iframe>

Thanks to all answers, save my day.

回答8:

If you are setting the contents of IFrame using javascript document.write() then you must close the document by newWin.document.close(); otherwise the following code will not work and print will print the contents of whole page instead of only the IFrame contents.

var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();

回答9:

Use this code for IE9 and above:

window.frames[\"printf\"].focus();
window.frames[\"printf\"].print();

For IE8:

window.frames[0].focus();
window.frames[0].print();

回答10:

I am wondering what\'s your purpose of doing the iframe print.

I met a similar problem a moment ago: use chrome\'s print preview to generate a PDF file of a iframe.

Finally I solved my problem with a trick:

$(\'#print\').click(function() {
    $(\'#noniframe\').hide(); // hide other elements
    window.print();         // now, only the iframe left
    $(\'#noniframe\').show(); // show other elements again.
});

Javascript Print iframe contents only

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

回答7:

回答8:

回答9:

回答10:

收藏的人(0)

Javascript Print iframe contents only

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

回答7:

回答8:

回答9:

回答10:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮