想你大结局,康易困,愿时光凝结国语版
本文介绍了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>
需要使同层元素不被覆盖,可以加
不过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;
例子:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论