Vue中嵌套标签iframe的使用

海蓝树

已于 2022-11-01 19:11:53 修改

阅读量3.4w

点赞数 4

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-11-01 19:10:29 首次发布

原文链接：https://cloud.tencent.com/developer/article/1978716

版权

vue 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍Vue项目中iframe的应用，包括动态调整高度、不同嵌入方式及直接设置链接等实用技巧，帮助开发者更好地掌握iframe的使用。

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

前端开发：Vue中嵌套标签iframe的使用 - 腾讯云开发者社区-腾讯云

前言

在前端开发过程中，往原有页面中嵌入新的页面的需求也是比较常见的需求操作，尤其是在比较复杂的必须要用嵌套的场景下。前端中使用嵌套的时候，需要用到的就是iframe标签，通过该标签可以规定一个内联框架，然后放入需要嵌套的新页面即可。本篇博文来分享一下关于iframe的使用方法，尤其是对于初级开发者来说尤为重要。

一、iframe

1、定义和使用

2、使用说明

（1）可以把需要的文本放置在 <iframe> 和 </iframe> 二者之间，这样就可以应对不支持 <iframe> 的浏览器了；

（2）通过使用 CSS 给 <iframe> 定义需要的样式；

（3）<iframe> 标签支持HTML的全局属性、事件属性、以及HTML5的新属性。

3、其他注意事项

通过网页使用iframe嵌入新的网页的时候，有时需要动态处理src的值，而不是固定的值，这就需要给iframe 的src赋值，通常是使用js来实现。

4、使用实例

根据实际开发过程中的不同需求，把实战中比较常见的处理方式汇总出来，需求是做不完的，也不可能全部覆盖到，这里只分享一些比较常见的操作，方便有需要的开发者查阅使用，具体的实例如下所示。

1.iframe使用：根据数据自动增长页面的高度设置

<div style="padding-top:10px;">
　　<iframe id=“frame”  src=""  onload="Javascript:setHeight(this)" style="width: 100%;border: 0px;margin:0;display: none"></iframe>
</div>
function setHeight(obj){
　　var w=obj;
　　if (document.getElementById){
　　　　if (w && !window.opera){
　　　　　　if (w.contentDocument && w.contentDocument.body.offsetHeight){
　　　　　　　　w.height = w.contentDocument.body.offsetHeight+40;
　　　　　　}else if(w.Document && win.Document.body.scrollHeight){
　　　　　　　　　　w.height = win.Document.body.scrollHeight+40;
　　　　　　}
　　　　}
}

2.iframe使用：两种不同的嵌入新页面的方式

<div style="padding-top:10px;">
　　<iframe id=“frame”   style="width: 100%;border: 0px;margin:0;display: none"></iframe>
</div>

方法一：通过一个方法，将新页面的链接放入到iframe中

function preview(frame) {
    var myIframe = $("#frame");
    var url= basePath + "/base/commonFileUpload/preview?id="+frame+"&split=1";
    $('#frame').attr('src', url);


}

方法二：如果是直接打开一个新窗口展示url生成的页面

window.open(basePath + "/base/commonFileUpload/preview?id="+frame+"&split=1");

3.iframe使用：直接设置嵌入新页面链接的方式

<template>
    <div slot="body" class="container offset-bottom">
        <div  v-if="isfolw==true" style="height:100%;padding-top:44px;"> 
            <iframe :src="flowSrc" style="height:100%; width:100%;margin:0;border:0;"> </iframe>
        </div>
    </div>
</template>


<script>
export default {


    data() {
        return {
            flowSrc: null,
  }
    },
  created() {
        this.flowSrc = process.env.DEV_CLOUD_WEB_API + '/dev-vue/areamobile/#/WorkTask/List/todoList';  //直接给flowSrc赋值链接
    },


}
</script>