首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Safari/Chrome中从javascript打印IFrame

在Safari和Chrome中从JavaScript打印IFrame,可以使用以下方法:

  1. 获取IFrame的内容

首先,需要获取IFrame的内容。可以使用JavaScript的contentWindow.document属性来获取IFrame的DOM文档对象。

代码语言:javascript
复制
var iframe = document.getElementById('your-iframe-id');
var iframeContent = iframe.contentWindow.document;
  1. 创建一个新的窗口

接下来,需要创建一个新的窗口,用于打印IFrame的内容。可以使用JavaScript的window.open()方法来创建一个新的窗口。

代码语言:javascript
复制
var printWindow = window.open('', '_blank');
  1. 将IFrame的内容复制到新窗口

将IFrame的内容复制到新窗口,以便在新窗口中打印。可以使用JavaScript的innerHTML属性来复制IFrame的内容。

代码语言:javascript
复制
printWindow.document.body.innerHTML = iframeContent.body.innerHTML;
  1. 在新窗口中打印

最后,需要在新窗口中打印。可以使用JavaScript的window.print()方法来打印新窗口的内容。

代码语言:javascript
复制
printWindow.print();

完整的JavaScript代码如下:

代码语言:javascript
复制
function printIFrame(iframeId) {
  var iframe = document.getElementById(iframeId);
  var iframeContent = iframe.contentWindow.document;
  var printWindow = window.open('', '_blank');
  printWindow.document.body.innerHTML = iframeContent.body.innerHTML;
  printWindow.print();
}

// 调用printIFrame函数,传入IFrame的ID作为参数
printIFrame('your-iframe-id');

请注意,这种方法可能会受到浏览器的安全限制,因此可能需要用户的授权才能正常打印。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在 Chrome 执行 JavaScript 代码

下面来介绍如何在 Chrome 打开开发者工具,以及如何在开发者工具运行调试 JavaScript 代码。 打开开发者工具 Chrome 的开发者工具界面如下图所示。...快捷键 F12 同样的,一般在 Chrome ,可以直接通过 F12 快捷键来打开开发者工具。 菜单进入 依次右上角菜单栏中选择 更多工具 -> 开发者工具 开启。...开发者工具执行 JavaScript 代码 要在开发者工具执行 JavaScript 代码,也主要可以利用两种方式,一种是在 Console 窗口对 JavaScript 代码进行调试,而另一种方式则是使用...以下是两个实例,第一个实例将会在控制台中打印公众号:村雨遥,而第二个实例则会在浏览器中弹窗并显示公众号:村雨遥。...总结 以上就是今天的所有内容了,主要介绍了如何打开 Chrome 的开发者工具,并且利用开发者工具如何来执行 JavaScript 脚本。

5K20
  • 关于HTML面试题汇总之H5

    二、html语义化的好处 1、在样式丢失的情况下,页面呈现的结构也是清晰的 2、屏幕阅读器完全可以根据语义标签来读取内容(盲人网站) 3、pad、手机可以根据语义标签做不同的处理,手机上标题显示粗体...2、缺点:    2.1、不利用搜索引擎,因为爬虫只能看到框架而见不到框架的链接    2.2、框架有时候会让人迷惑,尤其是多个框架出滚动条的时候    2.3、不容易打印(暂时只能分框架页的打印,而不能打印整个...,包含iframe的页面的window.onload事件,只有等待iframe加载完成后才能触发,但可以通过js来动态设置iframe的src属性可以避免这种情况(chromesafari支持) 3、...iframe和frame的区别   3.1、iframe和frame实现的功能相同;   3.2、iframe可以单独使用,而frame必须和frameset一起使用   3.5、在html5iframe...--labe绑定的事件,会触发关联元素的事件--> <script type="text/<em>javascript</em>

    1.8K50

    WebKit三件套(3):WebKit之Port篇

    我们想了解有关Port方面的主要内容在于提供不同的Port接口供外部程序使用以及如何与外部程序交互,因为WebKit的其它两部分WebCore、Javascript实现,逻辑上讲是不直接提供接口给外部程序使用的...Android对Port移植方面的实现其实现有点特殊,由于Andriod将WebKit以一个Java类接口的方式提供给Java环境使用(不像上面提到的ChromeSafari等都是将WebKit以...DOM定义来组织,如何在提供的显示场所显示Web内容则往往由WebCore的layout部分来实现,其中充分利用了Css定义来布局显示该显示的内容;一旦涉及控制或动态处理往往由Port部分发起而由Javascript...另外一个角度来看一个页面一般说来(除非遇到iframe或插件需要另外提供一块子画布)相当于一块画布,浏览器引擎能在其精确的位置绘制不同颜色的文字、图片、图标等,同时根据当前的鼠标及一个模拟的输入提示光标位置...Port,进而充分利用WebKit的WebCore及Javascript实现方面的功能呢?

    2.1K10

    界面劫持之点击劫持

    Formjacking 技术角度看,主要是将恶意 javascript 代码嵌入到合法网站,用于获取敏感信息,而这种攻击手法本质上属于界面劫持的 clickjacking(点击劫持)。...由于用户需要用鼠标拖放完成的操作越来越多(复制粘贴、小游戏等等),拖放劫持大大提高了点击劫持的攻击范围,将劫持模式单纯的鼠标点击拓展到了鼠标拖放行为。...03 点击劫持原理3.1透明层+iframe透明层使用了 CSS 的透明属性,在(Chrome,FireFox,Safari,Opera浏览器):opacity:0.5;数值0到1,数值越小透明度越高...主要方法 JavaScript 实现鼠标跟随技术、按键劫持 (Stroke jacking) 技术等。...除了 Chromesafari 以外,还支持第三个参数 Allow-From(白名单限制)。

    69820

    《手把手教你》系列技巧篇(四十四)-java+ selenium自动化测试-处理https 安全问题或者非信任站点-下篇(详解教程)

    那么我们在做自动化测试的时候,如何跳过这一步骤,直接访问到我们需要的页面了,这个就是宏哥主要分享和讲解的如何在三大浏览器跳过这一步骤。...-purge-memory-button 在Chrome的任务管理器增加内存清理功能 序号 参数 说明 1 --allow-outdated-plugins 不停用过期的插件...2 --allow-running-insecure-content 默认情况下,https 页面不允许 http 链接引用 javascript/css/plug-ins。...16 --enable-print-preview 启用打印预览。 17 --extensions-update-frequency 设定拓展自动更新频率,以秒为单位。..., true); // Set the driver path System.setProperty("webdriver.safari.driver","Safari driver path");

    3.2K40

    记录工作遇到的各种问题(Bug,总结,记录)

    第一次成功打印出来,即触发了load事件,但点击下一页后,iframe实际上已经刷新了,但并不会再触发这个load事件 后来的解决办法是换了种监听方法,区别主要是获取iframe对象的方式变了,还不知为啥会这样...在Chrome开发者工具打开开发者工具(Inspect in DevTools) 其实Chrome开发者工具就像是一个iframe,嵌入到页面,也是可以审查的 首先打开DevTools至独立窗口中,...入口主要是这个文件 当然,也可以不下载,直接使用mozilla提供的来使用,不过需要解决一下跨域问题 60. iframe 的 visibility hidden属性在safari失效 一个bug,解决办法是用...以往的webkit内核两种都是支持的,今天发现更新的chrome61版本已经不再支持旧的做法,导致一些页面滚动相关的操作失效 当然,这里的标准规范是值指明的是标准的, <!...但在新版Chrome62),连提示都没有了,需要手动在设置添加Flash支持的网站例外才能播放 看了所用的Flash播放器(CuPlayer),播放前是先检测插件是否存在的,这造成了在新版Chrome

    18K12

    前端面试那些坑之HTML篇

    首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,div的display默认值为“block”,则为“块级”元素;span默认display属性值为...渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。...[Opera内核原为:Presto,现为:Blink;] Webkit内核:Safari,Chrome等。...使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript 动态给iframe添加src属性值,这样可以绕开以上两个问题。 13、Label的作用是什么?...通过visibilityState 的值检测页面当前是否可见,以及打开网页的时间等; 在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放; 17、如何在页面上实现一个圆形的可点击区域?

    1.5K90

    JavaScript 并发下载

    在 IE6/7 里 JavaScript两个方面阻碍页面呈现: script 标签下面的网页资源在 script 加载完之前会停止请求、下载。...在 ie6/7 firefox2/3 Safari3 Chrome1 和 opera 下 script 标签会阻碍下载: 虽然在 ie8,safari4,chrome2 下 script 可以并发,...下载 script,然后用 eval 方法执行 XHR 的 responseText XHR Injection — 通过 XHR 下载 script,然后建立一个 script 标签并把它插入文档...iframe 里,通过 iframe 下载它 Script DOM Element — 创建 script 标签并把它的 src 属性指向你的脚本地址 Script Defer — 添加 script...标签的 defer 属性,这个只在 ie 中有效,但 firefox3.1 也支持这个属性了 使用 document.write 方法在页面写入, 这个只在 ie

    43110

    新的浏览器缓存策略变更:舍弃性能、确保安全

    Chrome 的 HTTP 缓存当前的工作方式 85 版开始,Chrome 会使用它们各自的资源URL作为缓存键来缓存网络获取的资源。 下面我们来看几个示例: ?...浏览器在其缓存找之前缓存的资源,因此它使用了资源的缓存版本。 ? Cache Key: { https://x.example/doge.png } 图像是否 iframe 中加载都没有关系。...再次查看前面的示例,以了解缓存分区如何在不同的上下文中工作: ?...的 iframe 中加载,在这种情况下,图像是网络上下载的,因为缓存找不到相同的密钥。...+1 加 frame scheme://eTLD+1 Safari: 使用顶级 eTLD+1 Firefox: 计划实施顶级 scheme://eTLD+1 然后也考虑像 Chrome 一样增加第二个

    1.1K21

    Comet技术详解:基于HTTP长连接的Web端实时通信技术前言学习交流概述“服务器推”(Comet技术)的应用范围来看看更传统的基于客户端套接口的“服务器推”技术基于 HTTP 长连接的“服务器

    将“服务器推”应用在 Web 程序,首先考虑的是如何在功能有限的浏览器端接收、处理信息: 1] 客户端如何接收、处理信息,是否需要使用套接口或是使用远程调用。...最近几年,因为 AJAX 技术的普及,以及把 IFrame 嵌在“htmlfile“的 ActiveX 组件可以解决 IE 的加载显示问题,一些受欢迎的应用 meebo,gmail+gtalk 在实现中使用了这些新技术...3)Comet技术实现模型2:基于 Iframe 及 htmlfile 的流(streaming)方式 上节提到的 AJAX 方案是在 JavaScript 里处理 XMLHttpRequest 服务器取回的数据...同样的思路用在 iframe 方案的客户端,iframe 服务器端并不返回直接显示在页面的数据,而是返回对客户端 Javascript 函数的调用,“js_func(“data from server...用于 Web Push 时, 支持的浏览器和操作系统平台包括: Safari(iOS, Mac), Firefox/Chrome(Windows, Mac), IE6+。

    5.9K11
    领券