开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js iframe 打印 ie

在JavaScript中使用iframe进行打印，尤其是在Internet Explorer（IE）浏览器中，可能会遇到一些特定的兼容性问题。以下是一些基础概念、优势、类型、应用场景，以及可能遇到的问题和解决方案。

基础概念

iframe 是HTML中的一个元素，用于在网页中嵌入另一个文档。通过JavaScript操作iframe，可以实现多种功能，包括页面内容的隔离、动态加载内容以及打印特定部分的内容。

优势

内容隔离：iframe内的内容和主页面相互隔离，互不影响。
动态加载：可以动态地加载不同的页面或内容。
打印优化：可以只打印iframe内的内容，而不是整个页面。

类型与应用场景

类型：静态iframe和动态创建的iframe。
应用场景：
- 嵌入第三方内容（如地图、视频）。
- 分隔不同功能模块，避免样式冲突。
- 打印特定部分的页面内容。

可能遇到的问题及原因

在IE中打印iframe内容时，可能会遇到以下问题：

内容不显示或显示不全：可能是由于IE的安全设置限制了iframe内容的访问。
打印样式问题：IE可能不支持某些CSS打印属性，导致打印出来的效果与屏幕显示不一致。

解决方案

以下是一个示例代码，展示如何在IE中使用iframe进行打印，并解决常见问题：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print Iframe Content</title>
<style>
  @media print {
    body * { visibility: hidden; }
    #print-iframe, #print-iframe * { visibility: visible; }
    #print-iframe { position: absolute; left: 0; top: 0; }
  }
</style>
<script>
function printIframeContent() {
  var iframe = document.getElementById('print-iframe');
  if (iframe && iframe.contentWindow) {
    try {
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
    } catch (e) {
      alert("打印失败，请检查浏览器设置。");
    }
  } else {
    alert("无法找到iframe元素。");
  }
}
</script>
</head>
<body>
<button onclick="printIframeContent()">打印内容</button>
<iframe id="print-iframe" src="print-content.html" width="100%" height="600px"></iframe>
</body>
</html>

关键点解释：

CSS媒体查询：使用@media print来定义打印时的样式，确保只有iframe内的内容可见。
JavaScript调用：通过contentWindow.print()方法触发打印操作，并使用try-catch块来捕获可能的异常（如跨域问题）。

注意事项

确保iframe的src属性指向的页面允许被打印。
如果内容来自不同的域，可能会因为同源策略而无法访问iframe内容。
在IE中，可能需要调整浏览器的安全设置，允许网站运行脚本和访问本地资源。

通过以上方法，可以在IE中有效地使用iframe进行内容打印，并解决常见的兼容性问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js调用ie打印

-340A-11D0-A96B-00C04FD705A2" height="0" width="0"> 打印..." οnclick="document.all.WebBrowser.ExecWB(6,1)"> 打印" οnclick="document.all.WebBrowser.ExecWB...="button" value="页面设置" οnclick="document.all.WebBrowser.ExecWB(8,1)"> 打印...OK" οnclick=" return myprint(this);"> 打印预览" οnclick="document.all.WebBrowser.ExecWB

25.6K3 0

Permission denied Accessing iFrame in IE

Permission denied Accessing iFrame in IE 各种弹窗和 Toggle 方法中报错，主要由于 iframe 引起，在主页面中引用了 iframe 而 iframe...中希望使用 js 来获取主页面的内容因此报错在 Ext-js 中也可能会报同样的错误，很落后的库了，还是推荐使用 Bootstrap 解决办法是重制 document 的内容 try{...permission denied errors. } s = document.getElementById(s); 参考文献 SCRIPT70: Permission denied Accessing iFrame...in IE

5933 0

调用IE打印

CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0> 打印... οnclick=document.all.WebBrowser.ExecWB(6,1)> 打印 οnclick=document.all.WebBrowser.ExecWB...type=button value=页面设置 οnclick=document.all.WebBrowser.ExecWB(8,1)> 打印...OK" οnclick=" return myprint(this);"> 打印预览 οnclick

1.5K4 0

IE中iframe跨域访问

在IE中，A系统中的iframe或者frame跨域访问了B系统一个资源时，IE浏览器默认设置是禁用第三方Cookie的，这就导致向B系统发送请求时丢失了JSESSIONID，从而B系统服务器中就无法得到...IE中如此处理可能也是出于安全考虑，经测试，在Chrome、FireFox中默认是允许第三方Cookie的，也就不会存在跨域引发的问题。这种跨域的情况通常出现在多个系统间互相嵌入某些功能。...3.1 浏览器 3.1.1 放弃IE 那是不可能的。

4.2K0 0

javaScript创建无边框iframe兼容ie

var m_iframe=document.createElement("iframe"); m_iframe.scrolling="no"; m_iframe.setAttribute...("frameborder", "0", 0); //m_iframe.frameborder="0";ie7无效 m_iframe.src="http://www.cnblogs.com/cssfirefly..."; document.body.appendChild(m_iframe); 注意: m_iframe.frameborder="0"; 替换为m_iframe.setAttribute...("frameborder", "0", 0);就可以了 IE7下动态创建Iframe时，在IE里面的属性有大小写区分，所以frameBorder与frameborder是不同属性 this.frame.setAttribute

1.6K5 0

iframe高度自适应的IE解决方案

变长iframe变长iframe变长iframe变长iframe变长iframe变长iframe变长iframe变长iframe变长 iframe变长 iframe变长... iframe变长 iframe变长 iframe变长 iframe变长 ...> New Document 返回frm.html 在IE8...上失效(不过IE8上可以通过设置源代码的Meta，让IE8以兼容性视图浏览，也算是一种IE8下的解决办法)

9178 0

js获取iframe中的内容(iframe内嵌页面)

js 如何获取包含自己iframe 属性 a.html 如何在b.html里获取包含他的iframe的id 在父页面中定义函数，再到子页面中调用。...iframe for(i=0;i js怎样获取iframe，src中的参数如何获取iframe里的src里面的属性 js如何修改iframe 中元素的属性 iframe 属性及用法越详细越好。。...在线等 iframe元素的功能是在一个html内嵌一个文档，创建一个浮动的郑iframe可以嵌在网页中的任意部分 name：内嵌帧名称 width：内嵌帧宽度(可用像素值或百分比) height：内嵌帧高度...(可用像素值或百分比) frameborder：内嵌帧边框 marginwidth：帧内文 jQuery怎么给iframe的src赋值给iframe src赋值，代码如下：特别注意： 1.上述jquery...代码不能缺少 $(document).ready(); ，否则iframe src赋值失败。

24.7K5 0

Web使用热敏打印小票(IE环境)

概述在html页下使用Epson P60II 热敏纸下打印小票，使用的打印方案为调用window.print()。...objprinter.Write(String.fromCharCode(0x1B) + String.fromCharCode(0x69)); objprinter.Close(); } 3、设置隐藏模式打印

1.6K1 0

JS 对指定iframe 全屏操作

首先要知道如果直接在iframe 页面调用requestFullScreen()是没有效果的，需要在当前iframe 的parent 页面调用，其实iframe的 DIV 也是这个原因。...document */ var parentDoc = parent.document; /* 定义一个接收元素的变量 */ var thisIframe = null; $("iframe...HTML W3C 提议 else if (element.requestFullScreen) { element.requestFullScreen(); } //IE11

8.3K5 0

iframe自动调整高度能在IE5里实现吗

{ try { document.all["shit"].style.height=shit.document.body.scrollHeight } catch(e){} } iframe...autoResize())" align="left" width="100%" marginwidth="0" marginheight="0" scrolling="no" FRAMEBORDER="0">iframe

5082 0

【JS应用】Iframe 解决跨域

所以每个知识点都会写成文章，所有文章都会放在公众号右下角的前端进阶课程总结中~~~也希望能够帮助到需要的人~~ 跨域的东西，简直不要接触太多，网上相关内容一抓一大把，但是突然学习到一个关于前端解决跨域的方式就是利用 iframe...1、基本原理 2、简单模拟 2、封装的函数 3、封装函数实战解决场景现在我们在 a.com 的域名下有一个页面我们要请求 b.com 下的一个接口，很明显是会跨域的，无法直接请求今天我们使用 iframe...需要传递给真正需要数据的父页面（同样是 a.com 下）大概了解之后，我们来说一下简单流程现在有 a.com 下的内容页 A，需要请求接口 b.com/xxxx，但是跨域 1、内容页 A 嵌入一个隐藏 iframe...，iframe 加载 b.com 下的辅助页面 B 2、辅助页面B 开始请求接口 b.com/xxx，请求成功，存放到 window.name 3、隐藏 iframe 由页面B 跳转到 a.com 下另一个辅助页...比如请求的接口需要某些参数，这些参数是父页面提供的，所以就只能把这些参数放到 iframe 的 url 上以便通信拼接 url 函数 function parseUrl (url, param) {

15.3K1 1

JS原生打印

//打印预览 window.print(); /*设置默认横向打印*/ @page { size: landscape; } /*设置默认纵向打印*/ @page { size: portrait

22.5K2 0

js判断本页面被 iframe 嵌套

html> IE... // 判断本页面来自 iframe // 可行 if (window.frames.length !...= parent.frames.length) { console.log('在iframe中111'); } // 不可行 if (self.frameElement...&& self.frameElement.tagName == "IFRAME") { console.log('在iframe中222'); } // 可行 if...= top) { console.log('在iframe中333'); } // 禁止页面被别人iframe // if (top.location !

3.5K1 0

JS 实现分页打印

在调用 window.print() 时，可以实现打印效果，但内容太多时要进行分页打印。...在样式中有规定几个打印的样式 page-break-before 和 page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。...每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。...page-break-before 若设定成 always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。

14.2K2 1

JS 禁用移动流量球、禁用iframe嵌入

JS 禁用移动流量球、禁用iframe嵌入情况1： native 与h5 交互使用WebViewJavascriptBridge，此时，在native 会在打开你的网页的时候，嵌入一个iframe...原因在于移动流量球，在打开你页面的同时，给你嵌入了iframe，加入了他们的代码，移动流量球会检测到你的浏览情况，有时候更恶心的是，还会给你推送广告，移动、联通、电信都会有这个东西。...3、也就是使用 js 去实现禁止底部iframe载入网页。...var iframes = document.getElementsByTagName("iframe"); for(var i=0;i<iframes.length;i++){ if(iframes...="name") iframes[i].removeNode(true); } ---- 4、更改 iframe 的属性把 src 属性改为: about:blank 。

3.9K2 0

js判断iframe加载是否成功的方法

今天木槿来探讨一下js判断iframe加载是否成功的方法，并且兼容多种浏览器。...由于经常需要动态添加iframe，然后再对添加的iframe进行相关操作，而往往iframe还没添加完呢，后边的代码就已经执行完了，所以有些你写的东西根本没有显示出来。...这时，我们就要考虑是否可以等iframe加载完后再执行后边的操作，当然，各种浏览器早就为我们考虑到啦，看下面：ie浏览器IE的每个elem节点都会拥有一个onreadystatechange事件，这个事件每次在...elem内容发送变化的时候触发，比如内容正在载入loading会触发，内容载入完毕loaded会触发，内容载入成功complete会触发，这个函数还需要配合readyState，这是ie上每个elem都拥有的属性...arguments.callee);//这里是回调函数}});其他浏览器：Firefox,Opera,chrome等在其他非IE的浏览器上 Firefox,Opera,chrome等 iframe 都会拥有一个

2K2 0

IE下JS文件失效问题总结

今天遇到了一个很诡异的问题，Firefox下好好的页面，在IE下却接二连三的报错，这到底是什么地方产生的错误。经过一上午的仔细排查，发现了真凶原来是IE对于对象和数组定义的严格限制。...在JS中，我们一般定义数组和对象都如下： var arr = [ 　　arr1, 　　arr2, 　　arr3, 　　arr4 ]; 对象： var obj = { 　　param:one,...　　param:two, 　　param:three }; 如果最后的一项多了一个“,”，那么在IE中就会产生错误，从而最终导致引用的JS文件失效。...例如： js'> function a(){ ... } var obj = { 　　param:a,...　　param:b, 　　param:c, js'> a(); alert(obj); 这个时侯就会出现函数调用的错误

3.4K3 0

WebBrowser（IE）与 JS 相互调用

在开发中我们经常将WebBrowser控件嵌入Winform 程序来浏览网页，既然是网页那么少不了JS。下面就让我们来说说他们两之间的相互调用。...但是说到和JS的调用，不得不说还是IE 的WebBrowser 最为简单方便。至于IE 为啥方便而其他的不方便，以后我会写文章分析。...下面我们还是先看看WebBrowser怎么和JS交互把： WebBrowser 执行JS 代码如果脚本已经存在于网页中，我们可以使用 InvokeScript 方法 public object InvokeScript...JS 调用 C# 方法接下来，我们来说说今天的重点，在JS中怎么调用C# 提供的方法。...用JSON传递是个不错的选择，C#和JS中都有JSON转换工具，可以试试。以上！

4.6K7 1

js 打印机打印指定局部区域

--endprint--> 打印" onclick="doPrint()"> function doPrint() ...--startprint-->"; //开始打印标识字符串有17个字符 eprnstr = ""; //结束打印标识字符串 prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容...prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容 window.document.body.innerHTML = prnhtml; //把需要打印的指定内容赋给...body.innerHTML window.print(); //调用浏览器的打印功能打印指定区域 location.reload(); //重新给页面内容赋值； }

6.7K5 0

js或jquery实现页面打印可局部打印

1、js实现（可实现局部打印）代码如下: js打印要打印的内容javascript打印-打印页面设置-打印预览代码打印吗？'))...="jquery-1.6.4.js"> $(function(){ $("input#biuuu_button").click(function(){ $("div#

8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭