《双陈记》情侣博客

位置:主页 > 前端设计 > 关于iframe的一点使用

关于iframe的一点使用

在做的项目后台页面需要搞一个iframe用来局部刷新。今天折腾了一上午,完成了相应的2个功能(1.左边导航栏点击某个菜单,改变右边iframe的src值切换相应的页面。2.解决iframe高度自适应的问题。)。很久以前用过一次iframe,貌似很久了,都忘了怎么弄了。把折腾好的代码记录一下,做个笔记,以后还有可能用到的。
1.js动态改变iframe的src地址:

<a onclick=“change_src(1)” >产品列表</a>
<a onclick=“change_src(2)” >制定产品</a>
<iframe src= marginwidth=‘0’ marginheight=‘0’ frameborder=‘0’ scrolling=‘no’ id=“iframe_name”></iframe>

 

<script type=“text/javascript”>
function change_src(i){
if(i==1){
document.getElementById(‘iframe_name’).src=‘pr_list.html’;
}
if(i==2){
document.getElementById(‘iframe_name’).src=‘pr_make.html’;
}
};
</script>

就这样就可以实现点击某个链接,改变iframe的src从而载入相应的页面。
2.利用jQuery实现iframe的高度自适应:

<script type=“text/javascript”>
$(function(){
$(“#iframe_name”).load(function(){
$(this).height($(this).contents().find(“#box”).height() + 40); //box为iframe页面外层div的id
});
})
</script>

PS:iframe高度自适应代码在chrome下,由于安全性的问题,静态页面没有效果,放在服务器端就有效果了。
jQuery就是用着舒服啊。不过原生js还是要好好学习的。



无觅相关文章插件

已经有12位童鞋留言了,还不来盖楼!

  1. 貌似除了广告联盟的现在很少还有用iframe的。

  2. 你终于又发文章了

  3. 看的不是太懂,看来要加强学习

  4. 呵呵。陈大哥,你很久没发博客了。 :evil:
    iframe平时在网站后台用得还是蛮多的。看来陈大哥要从前端跳到后台去了。
    :grin: 越来越大牛了。
    不过似乎改变iframe里面的src不用js来实现也是可以的。你尝试找一下

  5. ?我刚刚的留言哪里去了??
    :grin: :grin: 刚刚给我你找过了,a标签里面的target属性与iframe里面的name属性相同时,点击a标签的链接,ifame就会跳转,这个我记得在兄弟连视频教程里面有一节讲到窗口分帧技术,就是讲这个iframe

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片