vue组件中使用iframe元素的示例代码


Posted in Javascript onDecember 13, 2017

本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下:

需要在本页面中展示vue组件中的超链接,地址栏不改变的方法:

<template>
 <div class="accept-container">
   <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div>
<ul>
 <li v-for="item in webAddress">
  <a :href="item.link" rel="external nofollow" target="showHere" @click="showIframe">{{item.name}}</a>
 </li>
</ul>
<iframe v-show="iframeState" id="show-iframe" frameborder=0 name="showHere" scrolling=auto src=""></iframe>
 </div>
</template>
<script>
export default {
 name: 'hello',
 data () {
 return {
  iframeState:false,
  goBackState:false,
  webAddress: [
  {
   name:'segmentFault',
   link:'https://segmentfault.com/a/1190000004502619'
  },
  {
   name:'博客',
   link:'http://vuex.vuejs.org/'
  },
  {
   name:'特效',
   link:'http://www.yyyweb.com/377.html'
  }
  ]
 }
 },
 mounted(){
 const oIframe = document.getElementById('show-iframe');
 const deviceWidth = document.documentElement.clientWidth;
 const deviceHeight = document.documentElement.clientHeight;
 oIframe.style.width = deviceWidth + 'px';
 oIframe.style.height = deviceHeight + 'px';
 },
 methods:{
 goBack(){
  this.goBackState = false;
  this.iframeState = false;
 },
 showIframe(){
  this.goBackState = true;
  this.iframeState = true;
 }
 }
}
</script>
<style scoped>
</style>

需要使同层元素不被覆盖,可以加

<iframe id="dialogFrame" frameborder="0" scrolling="no" style="background-color:transparent; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;left:0;"></iframe>

不过html5有新的dialog元素用于对话框。

iframe的一些方法:

获取iframe内容:

var iframe = document.getElementById("iframe1");
 var iwindow = iframe.contentWindow;
 var idoc = iwindow.document;
  console.log("window",iwindow);//获取iframe的window对象
  console.log("document",idoc); //获取iframe的document
  console.log("html",idoc.documentElement);//获取iframe的html
  console.log("head",idoc.head); //获取head
  console.log("body",idoc.body); //获取body

自适应 iframe:

即1去掉滚动条,2设置宽高

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

例子:

<iframe id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取得传值的函数
Oct 27 Javascript
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 #Javascript
vue实现nav导航栏的方法
Dec 13 #Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 #Javascript
仿京东快报向上滚动的实例
Dec 13 #Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 #Javascript
vue-router路由懒加载和权限控制详解
Dec 13 #Javascript
JS+canvas画一个圆锥实例代码
Dec 13 #Javascript
You might like
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
vue实现列表滚动的过渡动画
2020/06/29 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
使用python生成目录树
2018/03/29 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Django的Modelforms用法简介
2019/07/27 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
晚会主持词开场白
2014/03/17 职场文书
村委会换届选举方案
2014/05/03 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
2015年老干部工作总结
2015/04/23 职场文书
2016教师节感恩话语
2015/12/09 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis