vue在页面嵌入别的页面或者是视频

以下是嵌入页面

<iframe name="myiframe" id="myrame" src="http://xxx.com/" frameborder="0" align="left" width="100%" height="100%"  scrolling="auto" marginWidth=0 marginHeight=0 class="iframesty" onload="changeFrameHeight()">
<p class="tip">你的浏览器不支持iframe标签</p>
</iframe>
scrolling="auto"=》可以滚动
scrolling="no"=》不可以滚动
onload="changeFrameHeight()=》根据适配的font-size大小改变初始化时候的高度
在index.html页面写js
window.addEventListener("orientationchange", resetrem);
window.addEventListener("resize",resetrem);
function resetrem(){
var fs = parseInt(document.querySelector("html").style.fontSize)
return fs
}
function changeFrameHeight(){
var fs = resetrem()
var ifm = document.getElementById('myrame');
ifm.height = document.documentElement.clientHeight - fs-6
}

嵌入视频

<div class="toast" :class="{tshow:toastshow}" style="width:90%;height:300px">
<iframe frameborder="0" :src="this.video_url" allowFullScreen="true" style="width:100%;height:300px" ></iframe>
</div>
<div :class="{mask:maskshow}" @click="hidden_video" @touchmove.prevent></div>
												

vue在页面嵌入别的页面或者是视频2的更多相关文章

  1. 通过Iframe在A网站页面内嵌入空白页面的方式,跨域获取B网站的数据返回给A网站!

    以下代码只是为演示该方法具体是如何操作的,实际的意义并不大. 其实这个方法还可以解决很多方面的跨域操作,以下两点为我工作中遇到的情况! 比如A系统中打开B系统页面的时候,获取B系统页面高度,A系统中可 ...

  2. session失效后,登录页面嵌入iframe框架

    在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...

  3. HTML页面嵌入视频和JS控制切换视频的问题

    文章摘自:http://www.cnblogs.com/jorton/archive/2012/03/19/vidio_in_site.html 首先,在页面中嵌入视频的HTML代码为: 1 < ...

  4. WebIM(5)----将WebIM嵌入到页面中

    在之前的文章中,已经开发了一个简单的WebIM,但是这个WebIM是在独立的页面中的,今天发布的WebIM是一个可以嵌入到自己网页中的版本,你只需添加少量的代码,就可以在页面中嵌入一个WebIM.不过 ...

  5. 基于VUE选择上传图片并在页面显示(图片可删除)

    demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...

  6. 第三方页面嵌入到web项目的方案 之 使用iframe嵌入

    有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...

  7. iPhone的App嵌入html页面问题

    测试环境:iPhone ios 11.0.3 问题:iPhone App嵌入HTML页面,页面拉动到底部时,手势从屏幕底部边缘开始往上拉动,页面出现白色图层,且html页面一屏外的会卡住,无法滚动,需 ...

  8. 转:vue项目如何刷新当前页面

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...

  9. react native (2) 嵌入h5页面 设置顶部导航

    嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...

随机推荐

  1. A - 取(m堆)石子游戏

    m堆石子,两人轮流取.只能在1堆中取.取完者胜.先取者负输出No.先取者胜输出Yes,然后输出怎样取子.例如5堆 5,7,8,9,10先取者胜,先取者第1次取时可以从有8个的那一堆取走7个剩下1个,也 ...

  2. windows 上的 neovim 配置

    可以使用简单的 linux 下 neovim 配置,增加了对 golang, python,  ruby 脚本文件一键运行快捷方式. """""&qu ...

  3. @ControllerAdvice注解的使用

    package com.vcredit.ddcash.monitor.controller; import com.vcredit.ddcash.monitor.model.dto.Response; ...

  4. CH 4401/Luogu 4168 - 蒲公英 - [分块]

    题目链接:传送门 题目链接:https://www.luogu.org/problemnew/show/P4168 题解: 经典的在线求区间众数的问题,由于区间众数不满足区间可加性,所以考虑分块,假设 ...

  5. [No000018F]Vim自动缩进配置、原理和tab键替换空格-Vim使用技巧(4)

    一.Vim缩进介绍 在没有设置Vim自动缩进的条件下,可以手动使用Vim命令对特定行进行缩进处理.在Vim插入模式下,按下 Tab 键时默认会输入一个制表符,可通过Vim配置项将 Tab 替换为空格, ...

  6. [No000018B]写代码要用 Vim,因为越难入门的工具回报越大

    编者按:现在的技术界有一种倾向,将软件/应用操作简单化,用户能轻松上手.但是工具是否强大,取决于它能否灵活地满足使用者的各种需要.有些工具虽然很难入门,学会了便能对自己的操作有更深的层次的了解,能赋予 ...

  7. 【RMAN】RMAN-05001: auxiliary filename conflicts with the target database

    oracle 11.2.0.4 运行以下脚本,使用活动数据库复制技术创建dataguard备库报错rman-005001: run{ duplicate target database for sta ...

  8. 随着应用对事务完整性和并发性要求的不断提高,MySQL才开始开发基于事务的存储引擎

    MYSQL 解锁与锁表 - 专注it - 博客园 https://www.cnblogs.com/wanghuaijun/p/5949934.html 2016-10-11 16:50 MYSQL 解 ...

  9. python-多线程等概念

    并发 & 并行 并发:是指系统具有处理多个任务的能力 并行:是指系统具有 同时 处理多个任务的能力 并行 是  并发的一个子集 同步 & 异步 同步:当进程执行到一个I/O(等待外部数 ...

  10. Androidstudio_LinearLayout