通过iframe嵌套网页

找了一套工作台界面,但是他的每一个网页的跳转都是打开新的网页,在改造的公共部分时候如果修改一个页面需要把每一个网页的同一个地方都修改,不利于维护,所以采用html的iframe标签,只做一个框架网页,其他的网页都是嵌入到这个框架中。

· iframe宽、高自适应

嵌套的iframe在放入框架网页后,很容易出现宽度不能完全填充或者过宽出现被嵌入的网页另起一行的问题:

宽度自适应: div或其他块中在<iframe >中添加  width="100%"属性即可实现宽度自适应

高度自适应:此处的自适应是显示完整的被嵌入的网页,在<iframe>中添加以下属性:

    var fdh=( this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);
   this.height=(fdh>0?fdh:0);",默认iframe的宽度设置为了0,也可以根据自身需要设置成其他值。

· 修改<iframe>的src属性

<iframe>的src属性用于指定被嵌入的网页,可以是本地的eg:index.html也可以是第三方的eg:http://www.baidu.com

document.getElementById("iframeID").src="mainPage.html";

如此实现获取src并修改内容跳显示指定的网页。

· 多个span调用同一个方法,根据span某个属性不同值对src赋不同值

首先在span为此标签设置一个name属性:name="mainPage" 定义一个方法οnclick="change(this),一定要传入this使得迪纳基此span时,获取这个标签。

function change(e){
 //获取iframe的name属性
 var spanText = e.getAttribute("name");
}

通过getAttribute("name")来获得name属性的值

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值