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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
Angular的事件和表单详解
Dec 26 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
最基础的vue.js双向绑定操作
Aug 23 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
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
2014学雷锋活动总结
2014/03/09 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
单位作风建设自查报告
2014/10/23 职场文书
涨价通知怎么写
2015/04/23 职场文书
员工开除通知书
2015/04/25 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏