pdf显示禁用工具栏 & iframe、object、embed引用区别

pdf显示禁用工具栏&iframe、object、embed引用区别国内主要视频网站的嵌入方式iframe、object、embed引用有什么区别，要在父页里显示子页的内容，里面那种方法更好？<iframe src= "test.html" width= "100%" height= "100% "> </iframe><embed src= "test.ht

viceen

5741人浏览 · 2021-11-26 10:01:18

viceen · 2021-11-26 10:01:18 发布

pdf显示禁用工具栏 & iframe、object、embed引用区别

国内主要视频网站的嵌入方式

iframe、object、embed引用有什么区别，要在父页里显示子页的内容，里面那种方法更好？

<iframe src= "test.html" width= "100%" height= "100% "> </iframe>

<embed src= "test.html" width= "100% " height= "100% "> </embed>

<object width=100% height=100% type=text/html data=test.htm> </object>

三种引用方式之间的区别？性能，速度，服务器资源占用…等等；跟服务器没有关系！

第一种是常规用法

第二、第三种会在页面加载后才显示

1、pdf显示不要工具栏——”xxx.pdf#toolbar=0“

pdf不显示工具栏的格式：xxx.pdf#toolbar=0

显示工具栏

在这里插入图片描述

不显示工具栏

在这里插入图片描述

1、示例

<embed src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf#toolbar=0"
              style="width:100%; height:100%;overflow:hidden;"
            >

<!-- 预览内容区 -->
<div class="show">
    <div class="showCount">
        <div class="count">
            <span v-if="!zbUrl">PDF或图片显示区域</span>
            <iframe
                    :src="zbUrl+'#toolbar=0'"
                    style="width:100%; height:100%;overflow:hidden;"
                    />
        </div>
    </div>
</div>

<script  lang="ts" setup>
const zbUrl = ref('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf')

// const zbUrl = ref('')
</script>

<style scoped lang="scss">
  :deep(.el-dialog__body) {
    overflow-y: hidden;
  }    
    
  .show {
    width: 860px;
    margin-left: 20px;
    background: #ffffff;
    position: relative;
    float: left;
    .showCount {
      .count {
        background: #d8d8d8;
        height: 800px;
        span {
          font-size: 50px;
          color: #333333;
          position: absolute;
          top: 360px;
          left: 200px;
        }
      }
    }
  }
</style>

2、区别

2.1、标签之frame、iframe、embed、object 和 applet

1、frame

frame标签说明：https://www.w3school.com.cn/tags/tag_frame.asp

frame 必须在 frameset 里，而 frameset 又不能和 body 共存（就是一旦存在 frame，就不能存在 body 了，因此这个基本没人使用）

<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

</html>

2、iframe

iframe标签说明：https://www.w3school.com.cn/tags/tag_iframe.asp

iframe 了，它很灵活，不需要放在 frameset 中，可以放在 body 里面。

<html>
<body>

<iframe src="/i/eg_landscape.jpg"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>

</body>
</html>

3、embed

embed标签说明：https://www.w3school.com.cn/tags/tag_embed.asp

中文翻译，“嵌套”。常用于嵌入插件（浏览器插件、flash插件）。

注意：大多数现代浏览器已经弃用并取消了对浏览器插件的支持。

<!DOCTYPE HTML>
<html>
<body>

<embed src="/i/helloworld.swf" />

</body>
</html>

4、object

object标签说明：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object

HTML 元素（或者称作 HTML 嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。

<!-- 嵌入一个 pdf -->
<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

<!-- 嵌入一个 flash 电影 -->
<object data="move.swf" type="application/x-shockwave-flash"></object>

<!-- 嵌入一个带参数的 flash 电影 -->
<object data="move.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

object 和 embed 的使用，在国内视频厂商的嵌入视频方案，体现得淋漓尽致：https://harttle.land/2017/02/12/embeding-video-sites.html

5、applet

applet标签说明：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/applet

HTML中的Applet元素(<applet>) 标志着包含了Java的applet。

注意：这个元素已经被H5废弃，W3C规范不鼓励使用<applet>，更倾向于使用<object>标签。

<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
  <param name="difficulty" value="easy">
  <b>Sorry, you need Java to play this game.</b>
</applet>

2.2、iframe和embed的区别

对服务器资源占用等都是一样的。效果是一样的。

iframe主要是嵌套网页用的

embed 可以交互，但是iframe 不能；可插入控件对象，例如Flash、ActiveX控件等等；

embed用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，

注意：大多数现代浏览器已经弃用并取消了对浏览器插件的支持。

如：

<embed src="音乐地址.MP3" autostart="true" loop="true" hidden="true">

2.3、embed标签属性

src=“your.mid”
设定 midi 档案及路径。
autostart=true
是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。
loop=“true”
是否自动反复播放。LOOP=2 表示重复两次，true 是， false 否。
HIDDEN=“true”
是否完全隐藏控制画面，true 为是，no 为否 (内定)。
STARTTIME=“分:秒”
设定歌曲开始播放的时间。如 STARTTIME=“00:30” 表示从第30秒处开始播放。
VOLUME=“0-100”
设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定。
WIDTH=“整数” 和 HIGH=“整数”
设定控制面板的高度和宽度。(若 HIDDEN=“no”)
ALIGN=“center”
设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom
CONTROLS=“smallconsole”
设定控制面板的外观。预设值是 console。
console 一般正常面板　　
smallconsole 较小的面板　　
playbutton 只显示播放按钮　　
pausecutton 只显示暂停按钮　　
stopbutton 只显示停止按钮　　
ne、 left、right、texttop、middle、absmiddle、absbottom
CONTROLS=“smallconsole”
设定控制面板的外观。预设值是 console。
console 一般正常面板　　
smallconsole 较小的面板　　
playbutton 只显示播放按钮　　
pausecutton 只显示暂停按钮　　
stopbutton 只显示停止按钮　　
volumelever 只显示音量调节按钮