如何打印IFRAME中的内容

本文介绍了一种使用JavaScript从父窗口打印IFRAME内容的方法。关键在于调用print()方法前对IFRAME进行聚焦。文章还提供了一个示例脚本,并区分了Internet Explorer和其他浏览器的操作差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

: Here's a quick little tip that demonstrates how to print the contents of an IFRAME from the parent window using JavaScript. I've seen on several discussion forums that this isn't possible when it is. The key item to notice is that we set focus() to the IFRAME just before issuing the print() method.

Please take a moment to rate this tip: http://www.turnkeytools.com/polls/default.asp?POLLID=10000086&DOMAINID=4610


<script language=JavaScript>

function CheckIsIE()
{
if (navigator.appName.toUpperCase() == 'MICROSOFT
INTERNET EXPLORER') { return true;}
else { return false; }
}


function PrintThisPage()
{

if (CheckIsIE() == true)
{
document.ifWorkspace.focus();
document.ifWorkspace.print();
}
else
{
window.frames['ifWorkspace'].focus();
window.frames['ifWorkspace'].print();
}

}

</script>

In the parent window, just put a link or button to call the PrintThisPage() method:

<a href="javascript:PrintThisPage();" >Print This Page</a>
如果你想打印一个 `<iframe>` 中的内容,可以通过以下步骤实现: 1. 获取 `<iframe>` 元素的引用。你可以使用 `document.getElementById()` 或 `document.querySelector()` 方法来获取 `<iframe>` 元素的引用。 2. 等待 `<iframe>` 中的内容加载完成。你可以监听 `<iframe>` 元素的 `load` 事件来确保内容已经加载完成。 3. 获取 `<iframe>` 中的文档对象。你可以使用 `<iframe>` 元素的 `contentDocument` 属性来获取 `<iframe>` 中的文档对象。 4. 获取需要打印内容。你可以使用文档对象的 `getElementById()` 或 `querySelector()` 方法来获取需要打印内容。 5. 使用 `window.print()` 方法打印内容。在打印之前,你可以对需要打印内容进行一些样式或者格式的修改。 以下是一个示例代码: ```javascript // 获取 <iframe> 元素的引用 const iframe = document.getElementById('my-iframe'); // 等待内容加载完成 iframe.addEventListener('load', () => { // 获取文档对象 const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // 获取需要打印内容 const content = iframeDoc.getElementById('print-content'); // 修改样式或格式 // 打印内容 window.frames['my-iframe'].focus(); window.frames['my-iframe'].print(); }); ``` 需要注意的是,由于浏览器的安全限制,你只能打印来自同一域名下的 `<iframe>` 中的内容。如果 `<iframe>` 中的内容来自不同的域名,你将无法访问其文档对象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值