vue在页面嵌入别的页面或者是视频2
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的更多相关文章
- 通过Iframe在A网站页面内嵌入空白页面的方式,跨域获取B网站的数据返回给A网站!
以下代码只是为演示该方法具体是如何操作的,实际的意义并不大. 其实这个方法还可以解决很多方面的跨域操作,以下两点为我工作中遇到的情况! 比如A系统中打开B系统页面的时候,获取B系统页面高度,A系统中可 ...
- session失效后,登录页面嵌入iframe框架
在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...
- HTML页面嵌入视频和JS控制切换视频的问题
文章摘自:http://www.cnblogs.com/jorton/archive/2012/03/19/vidio_in_site.html 首先,在页面中嵌入视频的HTML代码为: 1 < ...
- WebIM(5)----将WebIM嵌入到页面中
在之前的文章中,已经开发了一个简单的WebIM,但是这个WebIM是在独立的页面中的,今天发布的WebIM是一个可以嵌入到自己网页中的版本,你只需添加少量的代码,就可以在页面中嵌入一个WebIM.不过 ...
- 基于VUE选择上传图片并在页面显示(图片可删除)
demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...
- 第三方页面嵌入到web项目的方案 之 使用iframe嵌入
有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...
- iPhone的App嵌入html页面问题
测试环境:iPhone ios 11.0.3 问题:iPhone App嵌入HTML页面,页面拉动到底部时,手势从屏幕底部边缘开始往上拉动,页面出现白色图层,且html页面一屏外的会卡住,无法滚动,需 ...
- 转:vue项目如何刷新当前页面
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...
- react native (2) 嵌入h5页面 设置顶部导航
嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...
随机推荐
- Android Studio 工具窗口浮动与布局恢复【申明:来源于网络】
Android Studio 工具窗口浮动与布局恢复[申明:来源于网络] http://bbs.chinaunix.net/thread-4182438-1-1.html
- 客户端TortoiseSVN的安装及使用方法 (申明:来源于网络)
客户端TortoiseSVN的安装及使用方法 (申明:来源于网络) 地址:http://blog.chinaunix.net/uid-27004869-id-4112057.html
- Windows的文件类型关联
在用脚本语言开发时尤其是在windows环境下发现想自动在命令行环境下运行脚本必须要带着相应的解释器的路径才行,不然就会提示无法找到对应的命令,于是乎在<学习Ruby>这本书中对于文件类型 ...
- okvis论文解读
C. Keypoint Matching and Keyframe Selection 我们的处理流程采用定制的多尺度SSE优化Harris角点检测器与BRISK描述符提取相结合[12].检测器通过逐 ...
- 蓝桥杯_算法训练_区间k大数查询
问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正整数,表示给定的序列. 第三个包含一个正整数m,表示询问个数 ...
- .net webservice的get支持,
默认创建的webservices.asmx是不支持get的, 如 [WebMethod] public string HelloWorld() { return "Hello World&q ...
- [No0000FF]鸡蛋煮熟了蛋黄为什么发黑?
你是否发现,鸡蛋煮熟后,蛋黄表面会呈现青黑色. 这是怎么回事? 这是因为鸡蛋的蛋白质富含有半胱氨酸,鸡蛋如果加热过度使半胱氨酸部分分解产生硫化氢,与蛋黄中的铁结合形成黑色的硫化铁.煮蛋中如果鸡蛋表面的 ...
- linux:基本概念和操作
1. 终端 Linux 默认提供了 6 个纯命令行界面的 “terminal”(准确的说这里应该是 6 个 virtual consoles)来让用户登录,在物理机系统上你可以通过使用[Ctrl]+[ ...
- vuex 的基本使用之Module
Module 首先介绍下基本的组件化规则:你可以根据项目组件的划分来拆分 store,每个模块里管理着当前组件的状态以及行为,最后将这些模块在根 store 进行组合. const moduleA = ...
- malloc函数 链表
https://baike.baidu.com/item/malloc函数 malloc的全称是memory allocation,中文叫动态内存分配,用于申请一块连续的指定大小的内存块区域以void ...