第四十六：iframe预览并且去掉工具栏并撑满可视区域

最新推荐文章于 2024-07-10 16:20:48 发布

路遥开着敞篷在兜风

最新推荐文章于 2024-07-10 16:20:48 发布

阅读量761

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/maliyao4233/article/details/135007617

版权

<iframe width="100%" :src="files[index].url+'#view=FitH,top&type=accesspdf#scrollbars=0&toolbar=0&statusbar=0'" frameborder="0" style="width: 100%; height: 100%"></iframe>

去掉工具栏加：&type=accesspdf#scrollbars=0&toolbar=0&statusbar=0’

自动盛满可视区域 在src后边’#view=FitH,top

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

路遥开着敞篷在兜风

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端面试题整理

newbalsh的博客

06-07

948

工厂模式是一种设计模式，目的是为了创建对象，它通常在类或类的静态方法中实现，有以下目的：当创建相似对象是执行重复操作当编译时，不知道具体类型的情况下，为工厂客户提供一个创建对象的接口//使用工厂方式创建一个对象//1.原料//2.加工 -- 对属性进行赋值//3.方法console.log("人物名称："+this.name);console.log("人物的性别："+this.sex);//4.加工结束,--输出返回return obj;//工厂模式的使用。

前端面试题200道--整理中

qq_58590962的博客

10-13

2007

css的居中方式 margin：0 auto; /（适用于行内元素）/ text-align：center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transfrom: translate(-50%,-50%); display: flex; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 2. px,em,rem,% 一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。二、em和rem相对.

参与评论您还未登录，请先登录后发表或查看评论

iframe预览并且去掉工具栏并撑满可视区域

最新发布

想好了再写！

07-10

264

【代码】iframe预览并且去掉工具栏并撑满可视区域。

iframe预览pdf默认侧边栏工具栏处于关闭

weixin_44735965的博客

12-25

1915

1.1设置默认缩放比例：在地址栏后面拼接 “#zoom=200”1.5 默认侧边栏工具栏处于关闭状态 navpanes=0。1.4自适应页面大小： view=FitH,top。1.3隐藏头部工具栏 ： toolbar=0。有些PDF形式打开的文件需要一些默认的配置。1.2 跳往特定页数： page=2。

iframe隐藏头部的toolbar

weixin_45781661的博客

10-12

3431

iframe隐藏头部的toolbar 隐藏此工具条，只需要在iframe的src中加入’#toolbar=0’，就可以了，代码如下 <iframe :src="resourceurl + '#toolbar=0'" ></iframe>

base64格式的pdf,使用iframe在页面上显示并禁用工具栏

m0_74101213的博客

08-10

1700

由于后台接口还没完成，便使用了一个input上传pdf，转为base64后在页面上展示；需求：后台返回base64格式的PDF，要在页面上展示。在iframe的src中添加#toolbar=0即可；上图展示的pdf有工具栏，打开控制台找到工具栏；

【iframe预览pdf隐藏操作栏】

weixin_48936527的博客

06-20

807

iframe预览pdf隐藏操作栏

隐藏iframe的顶部操作栏

qq_38181746的博客

09-07

1655

隐藏iframe的顶部操作栏在iframe中预览pdf顶部会有一行操作栏，里面有打印，但是我只想让他预览不让打印，打印另做处理在iframe标签中的预览地址后面加上#toolbar=0 效果

综合一

刘群智的博客

07-27

4111

自我介绍左固定右自适应布局这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。现在我们来看下HTML布局： <div id="outer"> <div id="sidebar" style="height:240px;">固定宽度区</div> <d

2.SDL规范文档

weixin_30872337的博客

02-27

2312

01.安全设计Checklist 输入验证校验跨信任边界传递的不可信数据(策略检查数据合法性，含白名单机制等)格式化字符串时，依然要检验用户输入的合法性，避免可造成系统信息泄露或者拒绝服务禁止向Java Runtime.exec()方法传递不可信、未净化的数据(当参数中包含空格，双引号，以-或者/符号开头表示一个参数开关时，可能会导致参数注入漏洞)，建议如果可以禁止JVM...

seo相关文章

热门推荐

luofengdong的专栏

03-01

3万+

<br />SEO 网址：http://blog.myspace.cn/xmmei/category/41652.aspx<br /><br /><br /> 五个等级SEOer的特征分析<br /> 顶尖的SEOer：<br /><br /> 他们几乎不写博客、不回帖、不参与互联网的争论，每天专心耕耘自己的网站，赚钱很低调，生活很滋润。新浪的SEO不知道哪位负责的，我一直想认识一下，感觉他是顶尖的。另外听说有某SEOer搞英文站做外贸，公司每月营业额好几百万但只有30几个员工，前台小姐的工资都在

隐藏iframe标签的操作栏

weixin_61285710的博客

12-16

2564

问题：使用标签iframe做pdf效果预览的时候，iframe标签会默认带有顶部操作栏，操作栏的确会让用户有了更多的操作性，但如果仅仅做预览pdf的话，这就有点操作冗余了。且，操作栏带有下载和打印等等，而有些文件仅供预览，这就导致了需求的冲突，解决操作栏的问题就变得必须而为之了。解决：可隐藏操作栏，使得页面简洁 <iframe ref="iframe" height="700" width="100%" :src="data..

iframe放大显示_使iframe的图片可以点击放大

weixin_42501270的博客

12-24

933

1.调用jweixin-1.0.0.js2.调用jquery-1.10.1.min.js3.---------------需要使用window.onload=function(){},使用$(document).ready(function(){});不行----------------window.onload=function(){function arrayToJson(o) {var...

iframe隐藏边框和滚动条

qq_17627195的博客

07-04

870

iframe隐藏边框和滚动条。

设置Iframe窗体大小

weixin_33881753的博客

01-20

721

//在子窗体中，子窗体操作父窗体元素　‘loadimg’为父窗体元素编号 parent.document.getElementById('loadimg').style.display='none'; //在子窗体中，设置父窗体的IFrame的高和宽 parent.document.getElementsByTagName('iframe')[0].height=document.body....

消除去掉隐藏浏览器iframe的scrollbar

iteye_9330的博客

06-23

370

[size=medium]在网上看了很多，也在safari和chrome，firfox，ie浏览器中测试过，一般设定iframe的height等于document.body.scrollHeight就可以，比如：document.getElementById('iframeId').height=docuemnt.body.ScrollHeight; 再把document.getElem...

IFrame自适应大小（全屏已实现）

Make

03-07

3331

近日做项目中用到页面中嵌套iframe，想要实现自适应大小，并且在IE中按F11键全屏时也可以自适应大小。在网上搜来的代码多数只适应页面中只有单个iframe情况，但笔者页面还有一个logo图片。经反复实现，如下代码可实现： 1、页面加载实现：iframe的onload事件，之所以减去84，是logo图片的高度，把这个位置给让出来。 2、全屏实现：window.onresi...

iframe标签的使用（隐藏操作栏）

weixin_45977625的博客

09-20

9153

iframe标签的基本使用 iframe标签在预览pdf文档时，顶部默认会有一行操作栏，可供用户下载、打印等。因在工作中遇到过一次这样的需求，需要控制用户的下载权限，网上大部分是说iframe无法控制，都推荐用pdf.js插件，但我总感觉应该可以的，功夫不负有心人，最终还是被我找到了，此方法基本可行，特此记录一、基本用法 <iframe ref="iframe" height="700" width="100%" :src="pdfurl"

iframe隐藏工具栏

10-11

要在 iframe 中隐藏工具栏，你可以使用以下方法： 1. 使用 CSS 样式：可以通过将 `overflow` 属性设置为 `hidden` 来隐藏工具栏。例如，在设置 iframe 的样式时，可以添加以下代码： ```css iframe { overflow: hidden; } ``` 2. 使用 frameborder 属性：设置 iframe 的 frameborder 属性为 0，这将隐藏工具栏。例如： ```html <iframe src="your-url" frameborder="0"></iframe> ``` 3. 使用 sandbox 属性：使用 iframe 的 sandbox 属性，可以限制 iframe 内容的权限，并隐藏工具栏。例如： ```html <iframe src="your-url" sandbox></iframe> ``` 请注意，这些方法可能会因浏览器和网站的不同而有所差异。某些浏览器可能不支持某些属性或方法。因此，在实际使用时，请根据您的需求和测试结果进行选择。