在vue中嵌入外部网站的实现

2024-08-18 20:14:01

利用iframe

top:导航栏的height

left:左侧菜单栏的width

src:右侧页面要嵌入的外部网站

<template>
 <div>
  <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:64px;left: 240px;right:0px;bottom:100px;"></iframe>
 </div>
</template> 

<script>
 export default {
  data () {
   return {
   }
  },
  mounted(){
   /**
   * iframe-宽高自适应显示
   */
   function changeMobsfIframe(){
    const mobsf = document.getElementById('mobsf');
    const deviceWidth = document.body.clientWidth;
    const deviceHeight = document.body.clientHeight;
    mobsf.style.width = (Number(deviceWidth)-240) + 'px'; //数字是页面布局宽度差值
    mobsf.style.height = (Number(deviceHeight)-64) + 'px'; //数字是页面布局高度差
   }

   changeMobsfIframe()

   window.onresize = function(){
    changeMobsfIframe()
   }
  }
 }
</script>

补充知识：导航钩子有哪几种，如何将数据传入下一个点击的路由页面

1.全局导航守卫

//前置钩子
router.beforeEach((to,from,next)=>{
 //do something
})
//后置钩子(没有next参数)
router.afterEach((to, from)=>{
 // do something
})

2.路由独享守卫

const router = new VueRouter({
 routes: [
 {
  path: '/file',
  component: File,
  beforeEnter: (to, from, next)=>{
  //do something
  }
 }
 ]
})

3.组件内的导航钩子

组件内的导航钩子主要有三种，beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。它们是直接在路由组件内部直接进行定义的

data(){
 return{
 pro:'产品'
 }
},
beforeRouteEnter:(to,from,next)=>{
 console.log(to)
 next(vm => {
 console.log(vm.pro)
 })
}

注意：beforeRouteEnter不能获取组件实例this，因为当守卫执行前，组件实例还没被创建出来，我们可以通过给next传入一个回调来访问组件实例，在导航被确认时，会执行这个回调，这时就可以访问组件实例了。

仅仅是beforeRouterEnter支持给next传递回调，其他两个并不支持，因为剩下两个钩子可以正常获取组件实例this。

4.params和query

params传参

this.$router.push({
 name: 'detail',
 params: {
 name: 'xiaoming'
 }
});
//接收
this.$route.params.name

query

this.$router.push({
 path: '/detail',
 query:{
 name: 'xiaoming'
 }
});
//接收
this.$route.query.id

query和params的区别

params只能用name来引入路由，query既可以用name又可以用path（通常是path）

params类似于post方法，参数不会在地址栏中显示

query类似于get，页面跳转的时候，可以在地址栏看到参数

补充：

router为VueRouter实例，想要导航到不同url，则使用router.push方法

$route为当前router跳转对象，在里边获取name,path,query,params等数据

以上这篇在vue中嵌入外部网站的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue引用外部JS的两种种方法

前言肯定会遇到没有npm化的库自己写的js 方法在Vue中该怎么引用呢第一种如果库是es6写的就可以用import 引入比如我自己写的http 封装接口的方法就可以这样子导入哦第二种是jquery的库可以在静态资源导入(或者是cdn资源加载) 我是vue-cli 3.0 基础之上架构的把squire这个富文本框放进public文件下面在index.html中这样子引用 Fannie式总结自己封装方法就采用es6方法这样方便第三方原生js 或者是jq的插件直接cd
vue组件内部引入外部js文件的方法

之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第
在vue中实现嵌套页面(iframe)

vue中嵌套iframe,将要嵌套的文件放在static下面.src可以使用相对路径,也可使用服务器根路径http:localhost:8088/- <iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute
在vue中嵌入外部网站的实现

利用iframe top:导航栏的height left:左侧菜单栏的width src:右侧页面要嵌入的外部网站 <template> <div> <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:64px;left:
在你的网页中嵌入外部网页的方法

Description: Using a tabbed interface, this DHTML script lets you display external web pages inline on your page, with the help of the IFRAME tag. We threw in a feature that allows the user to also load the webpage in the entire browser window when d
在vue中如何引入外部的css文件

目录 vue中引入外部css文件 1. 全局引入 2. 局部引入相对路径 3. 局部引入绝对路径 css-loader导致vue中样式失效的坑问题描述环境原因方案 vue中引入外部css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 import '@/style/reset.css' 我引入的是清除默认样式的css文件 2. 局部引入相对路径 <style scope
vue项目中在外部js文件中直接调用vue实例的方法比如说this

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app
一文教你在现有Vue项目中嵌入Blazor项目

目录准备流程 Vue 项目创建流程 Blazor项目创建流程运行效果准备流程 Vue 项目创建流程 1.使用Vue创建一个Demo项目全部选择默认No即可然后项目名称就用demo了 npm init vue@latest cd demo npm i 安装完成依赖,在项目的根目录找到index.html 添加以下代码即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo
Vue中引入样式文件的方法

一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&
Vue 中使用 CSS Modules优雅方法

CSS Modules:局部作用域 & 模块化 CSS Modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了.如: /* button.css */ .button { font-size: 16px; } .mini { font-size: 12px; } 它会被转换为类似这样: /* button.css */ .button__button--d8fj3 { font-size: 16px; } .button__mini--f90jc { font-size
聊聊Vue 中 title 的动态修改问题

由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一直是万年不变的 vue-project.理所应当的,这个问题被测试爸爸提了一个大大的缺陷. 犯了错的我赶紧解决这个问题,但是经过一段时间的摸索,我却发现,这一个小小的问题,却有着很多不同的解法. 首先,毫无疑问的是,我们应该使用 document.title 方法通过 DOM 操作来修改 title
Vue 中 filter 与 computed 的区别与用法解析

watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 filter:js中为我们提供的一个方法,用来帮助我们对数据进行筛选 watch与computed的区别: 1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性 2.watch不会缓存数据,每次打开页面都会重新加载一次, 但是computed如果之前进行过计算他会将计算的结果
Vue中父子组件通讯之todolist组件功能开发

一.todolist功能开发 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, index ) of list

在vue中嵌入外部网站的实现

相关推荐

随机推荐