This article introduces the example code of using iframe elements in the vue component. It is shared with you. The details are as follows:
The method of displaying the hyperlinks in the vue component in this page and not changing the address bar:
<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="" rel="external nofollow" target="showHere" @click="showIframe">{{}}</a>
</li>
</ul>
<iframe v-show="iframeState" 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:'/a/1190000004502619'
},
{
name:'blog',
link:'/'
},
{
name:'Special Effects',
link:'/'
}
]
}
},
mounted(){
const oIframe = ('show-iframe');
const deviceWidth = ;
const deviceHeight = ;
= deviceWidth + 'px';
= deviceHeight + 'px';
},
methods:{
goBack(){
= false;
= false;
},
showIframe(){
= true;
= true;
}
}
}
</script>
<style scoped>
</style>
Need to prevent elements of the same layer from being overwritten, you can add
Copy the codeThe code is as follows:
<iframe frameborder="0" scrolling="no" style="background-color:transparent; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;left:0;"></iframe>
However, html5 has new dialog elements for dialog boxes.
Some methods of iframe:
Get iframe content:
var iframe = ("iframe1");
var iwindow = ;
var idoc = ;
("window",iwindow);//Get the window object of the iframe ("document",idoc); //Get the document of the iframe ("html",);//Get the html of the iframe ("head",); //Get head ("body",); //Getbody
Adaptive iframe:
That is, 1 remove the scroll bar, 2 set the width and height
var iwindow = ; var idoc = ; = ;
example:
Copy the codeThe code is as follows:
<iframe name="google_ads_frame2" width="160" height="600" frameborder="0" src="" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.