Cet article présente principalement l'exemple de code pour utiliser les éléments iframe dans les composants vue. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra vous aider.
Vous devez afficher les hyperliens dans le composant vue sur cette page. Méthodes pour conserver la barre d'adresse inchangée :
<template> <p class="accept-container"> <p class="go-back" v-show="goBackState" @click="goBack">GoBack</p> <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> </p> </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>
Si vous devez empêcher l'écrasement des éléments d'un même calque. , vous pouvez ajouter
Copier le code Le code est le suivant :
Mais html5 a un nouvel élément de dialogue dans la boîte de dialogue.
Quelques méthodes d'iframe :
Obtenir le contenu 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 adaptatif :
C'est-à-dire 1 supprimer la barre de défilement, 2 définir la largeur et la hauteur
var iwindow = iframe.contentWindow; var idoc = iwindow.document; iframe.height = idoc.body.offsetHeight;
Exemple :
<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>
Recommandations associées :
Explication détaillée des trois formes d'écriture des composants de vue
Comment publier des composants vue sur npm
Liaison bidirectionnelle de données vue2.0 et formulaire bootstrap + composants vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!