So verwenden Sie Iframe-Elemente in Vue-Komponenten

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von Iframe-Elementen in Vue-Komponenten vorgestellt. Jetzt werde ich ihn mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Dieser Artikel stellt den Beispielcode für die Verwendung von Iframe-Elementen in Vue-Komponenten vor und teilt ihn mit allen. Die Details sind wie folgt:

Sie müssen ihn anzeigen Die Vue-Komponenten auf dieser Seite verhindern, dass sich Hyperlinks und Adressleisten ändern:

<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: &#39;hello&#39;,
 data () {
 return {
  iframeState:false,
  goBackState:false,
  webAddress: [
  {
   name:&#39;segmentFault&#39;,
   link:&#39;https://segmentfault.com/a/1190000004502619&#39;
  },
  {
   name:&#39;博客&#39;,
   link:&#39;http://vuex.vuejs.org/&#39;
  },
  {
   name:&#39;特效&#39;,
   link:&#39;http://www.yyyweb.com/377.html&#39;
  }
  ]
 }
 },
 mounted(){
 const oIframe = document.getElementById(&#39;show-iframe&#39;);
 const deviceWidth = document.documentElement.clientWidth;
 const deviceHeight = document.documentElement.clientHeight;
 oIframe.style.width = deviceWidth + &#39;px&#39;;
 oIframe.style.height = deviceHeight + &#39;px&#39;;
 },
 methods:{
 goBack(){
  this.goBackState = false;
  this.iframeState = false;
 },
 showIframe(){
  this.goBackState = true;
  this.iframeState = true;
 }
 }
}
</script>
<style scoped>
</style>

Sie müssen verhindern, dass Elemente auf derselben Ebene überschrieben werden. Sie können

<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>

hinzufügen verfügt über ein neues Dialogelement für Dialogboxen.

Einige Iframe-Methoden:

Iframe-Inhalt abrufen:

 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

Adaptives Iframe:

Das heißt, 1. Entfernen Sie die Bildlaufleiste, 2. Legen Sie die Breite fest und Größe

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

Beispiel:

<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>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie Graffiti im WeChat-Applet

Detaillierte Erläuterung der Verwendung übergeordneter Komponenten „außerhalb“ von React-Komponenten

Detaillierte Interpretation des iterierbaren Protokolls in ES6-Syntax

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Iframe-Elemente in Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!