vue中引入其他网站页面

喜欢ヅ旅行 2023-06-08 06:13 2阅读 0赞

**以百度为例  因为代码比较简单  直接附上源码**

<template>
        <Card shadow>
            <div style="min-height: 500px;width: 100%;">
                
                <iframe 
    				id="iframeId" :src="url" frameborder="0" class="pc iframe"  scrolling="auto">
    			</iframe>
    	
            </div>
        </Card>
    </template>
    <style lang='less'>
    .iframe {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        overflow-y: hidden;
    }
    </style>
    <script>
     
    export default {
      components: {},
      data () {
        return {
          url: 'https://www.baidu.com/'
        }
      },
      mounted () {
      },
      methods: {
        
      }
     
    }
    </script>

**测试结果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70]: /images/20230531/16907233cd564f60bd9f348adc56dc1a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关怎样在vue单页面中引入其他组件

场景在一个vue的单页面，假如是home.vue中要引入其他组件的内容。页面结构如下： ![Image 1][]![20181127210752392.jpg][

蔚落/ 2023年10月18日 11:52/ 0 赞/ 55 阅读

相关 vue项目通过url链接引入其他系统页面

1.正常配置菜单，在vue页面使用iframe进行嵌套加载其它系统的页面，已加载百度为例 <template> <div id="app">

以你之姓@/ 2023年10月05日 03:57/ 0 赞/ 12 阅读

相关【Vue】Vue 中引入 ECharts

目录 1、安装 2、在 main.js 中引入 3、在需要调用的页面中的 js 使用 4、最重要的一点！ -------------------- 介绍 Echa

谁践踏了优雅/ 2023年07月11日 08:41/ 0 赞/ 9 阅读

相关 vue中引入其他网站页面

以百度为例因为代码比较简单直接附上源码 <template> <Card shadow> <div style="mi

喜欢ヅ旅行/ 2023年06月08日 06:13/ 0 赞/ 3 阅读

相关页面中引入地图

http://api.map.baidu.com/lbsapi/creatmap/ 可以在页面中引入地图，效果如下图： ![SouthEast][] [South

缺乏、安全感/ 2022年08月10日 12:41/ 0 赞/ 136 阅读

相关 jsp页面引入（包含）其他页面的三种实现方式

\[html\] [view plain][] [copy][view plain] 1. jsp页面实现引入其他页面的三种方式如下所示： \[html\] [view

红太狼/ 2022年06月13日 02:42/ 0 赞/ 754 阅读

相关 vue引入其他框架组件方法汇总

博前声明：这些方法都是基于nod.js的npm和webpack打包构建工具的前提下一、引入jQuery框架：首先在当前项目的根目录下（就是与package.json同目

谁借莪１个温暖的怀抱￠/ 2022年06月07日 06:47/ 0 赞/ 479 阅读

相关 vue中引入echarts

一、全局引入 1.通过以下命令安装Echarts ![在这里插入图片描述][20190429213452843.png] 2.main.js中引入echarts 和

骑猪看日落/ 2022年04月24日 22:10/ 0 赞/ 402 阅读

相关 html页面引入其他html页面代码

{include file="/course/common/footer.html"} //注意路径书写方式用该语法可以引入公共html模板代码举例：

川长思鸟来/ 2022年02月04日 06:55/ 0 赞/ 437 阅读

相关 vue中菜单栏如何引入另一个页面

vue中菜单栏如何引入另一个页面 1.在配置该页面的路由中，将配置children，把要引入的页面都放到children中： ![在这里插入图片描述][waterma

朱雀/ 2021年09月13日 16:46/ 0 赞/ 586 阅读