Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 基于jQuery实现点击同时更改两个iframe的网址

基于jQuery实现点击同时更改两个iframe的网址

发布时间:2013-08-10   编辑:www.jquerycn.cn
最近写了两个管理后台的前端页面,其中有一个管理后台,左侧菜单导航和右侧内容页是两个iframe,需求是,点击上面的主导航时,左侧iframe和右侧iframe调用不同的链接.
最近写了两个管理后台的前端页面,其中有一个管理后台,左侧菜单导航和右侧内容页是两个iframe,需求是,点击上面的主导航时,左侧iframe和右侧iframe调用不同的链接. 个人推荐用jquery实现,代码简洁,扩展性强.
jQuery部分:
复制代码 代码如下:

function gotourl(url_a, url_b)
{
$('#ifr_a').get(0).src = url_a;
$('#ifr_b').get(0).src = url_b;
}

html调用:

<a href="javascript:void(0)" onClick="gotourl('http://g.cn/','http://baidu.com');">点我下面两个iframe内容都会变</a>
<iframe src="http://jb51.net/" id="ifr_a" name="ifr_a" frameborder="0"></iframe>
<iframe src="http://s.jb51.net/" id="ifr_b" name="ifr_b" frameborder="0"></iframe>
通过js判断iframe的id,然后给不同id赋不同的src值也可以实现,但代码相对复杂一点.


原文发布于Mr.Think的个人博客: http://mrthink.net/javascript-jquery-twourl-twoifram/

您可能感兴趣的文章:
html5唤起app的方法
php跳转不改变浏览器地址
HTML5中postMessage实现跨域的代码分析
html5新机制:postMessage实现安全跨域通信(代码)
postMessage实现跨域、跨窗口消息传递
html5通过postMessage进行跨域通信的方法
界面操作劫持与HTML5安全的图文详解
什么是MAC地址-基础知识
jquery 操作iframe的几种方法总结
html5通过postMessage进行跨域通信的方法_html5教程技巧

[关闭]