vue組件中使用iframe元素的示例代碼

第vue組件中使用iframe元素的示例代碼liv-for="iteminwebAddress"

a:href="item.link"rel="externalnofollow"target="showHere"@click="showIframe"{{}}/a

/li

/ul

iframev-show="iframeState"id="show-iframe"frameborder=0name="showHere"scrolling=autosrc=""/iframe

/div

/template

script

exportdefault{

name:'hello',

data(){

return{

iframeState:false,

goBackState:false,

webAddress:[

name:'segmentFault',

link:'/a/1190000004502619'

name:'博客',

link:'/'

name:'特效',

link:'/377.html'

mounted(){

constoIframe=document.getElementById('show-iframe');

constdeviceWidth=document.documentElement.clientWidth;

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

stylescoped

/style

需要使同層元素不被覆蓋，可以加

復(fù)制代碼代碼如下:

iframeid="dialogFrame"frameborder="0"scrolling="no"/iframe

不過html5有新的dialog元素用于對話框。

iframe的一些方法：

獲取iframe內(nèi)容：

variframe=document.getElementById("iframe1");

variwindow=iframe.contentWindow;

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

自適應(yīng)iframe:

即1去掉滾動(dòng)條，2設(shè)置寬高

variwindow=iframe.contentWindow;

varidoc=iwindow.document;

iframe.height=idoc.body.offsetHeight;

例子：

復(fù)制代碼代碼如下:iframeid="google_ads_frame2"name="google_ads_frame2"width="160"height="600"frameborder="0"src="target.html"marginwidth="0"marginheight="0"vspace="0"hspace="0"allowtranspare