【JS/Jquery】点击事件如何对【iframe】里面的元素生效

类似情况我以前也遇到过，原因是$(function()是在网页加载完成后（不包括iframe加载）立即执行，而此时iframe中的内容可能并未加载完成。解决的办法是让$(function()延时1秒或几秒后执行。

这个问题我之前也遇到过，一直没有解决。后来改用Ajax 读取那个页面的制定容器里面的html content了，然后插入到自己的页面中。再CSS定义一下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body><div id="ad">
点击id为ad区域内文字内容或a属性等元素生效,点击iframe里面的元素不生效
<br/><br/><a target="_blank" href="http://www.baidu.com/">点击a属性生效</a>
<br/><br/>直接iframe显示版
<br/><br/>
<iframe id="cproIframe1" src="http://cpro.baidu.com/cpro/ui/uijs.php?rs=0&tu=u470987&tn=text_default_300_250&n=lanrennet2010_cpr&adn=3&rsi1=250&rsi0=300&rad=&rss0=%232F3C45&conBW=0&rss1=%232F3C45&conOP=0&rss2=%2361A7C7&titFF=%25E5%25AE%258B%25E4%25BD%2593&titFS=12&titTA=left&rss3=%23CFE0EE&rss4=%234CB509&rss5=&rss6=%23FF7B0E&rsi5=4&ts=1&at=6&ch=0&cad=1&aurl=&rss7=&cpa=1&fv=11&cn=1&if=16&word=http%3A%2F%2Fwww.bendi.com%2F1.html%23&refer=&ready=1&jk=f3d3d3618bdb60aa&jn=3&lmt=1368672104&csp=1440,900&csn=1440,870&ccd=32&chi=2&cja=true&cpl=38&cmi=94&cce=true&csl=zh-CN&did=1&rt=6&dt=1368700905&ev=50331648&c01=0&prt=1368700905107&i3=f&anatp=0&stid=0&lunum=6" width="300" height="250" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true"></iframe><br/><br/>JS输出iframe显示版
<br/><br/>
<script type="text/javascript">
var cpro_id = 'u470987';</script>
<script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></div><script type="text/javascript">
$(function(){
$("#ad a").click(function(){
setTimeout(function(){alert('你点击的id="ad"位置a属性生效了');}, 1000);
});
});
</script>
</body>
</html>还是原来的问题没解决..点击框架内的内容不生效

你说的Ajax 读取那个页面而现在不知道页面url地址,因为本身是JS输出iframe,iframe再输出html,Ajax难道能直接读取JS执行后的html代码??

在本页面控制iframe内元素的事件，涉及到JS跨域问题。如果iframe的src是外域的，好像没法实现。
可能有解决方案，但我不知道，只能告诉你会存在跨域问题。

你得在iframe里面添加时间，window的层次都不一样，事件肯定就添加不了啊！

一个是垮域了，你根本上不能操作iframe里的东西
二个同域的话，jquery你这样调用只能处理本window的东西，iframe里是另一个window,你要将iframe的document当成一个context传给jquery

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
* {
margin:0;
padding:0;
}
html { overflow:hidden; }
img { border:none; }
a {
text-decoration:none;
color:#000;
}
a:hover { color:#F00; }
a:fouce {
-moz-outline-style: none;
}
a { outline:0; }
ul li, ol li { list-style:none; }
h2 { font-size:18px; }
h3 { font-size:12px; }
.clear { clear:both; }
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
margin:0 auto;
padding:0 0px;
height:100%;
overflow:hidden;
}
.inline { display:inline; }
.of_hidden { overflow:hidden; }
.f_l {
float:left;
display:inline;
}
.f_r {
float:right;
display:inline;
}
.outer {
height: 500px;
position:absolute;
top:50%;
left:50%;
margin:-250px 0 0 -400px;;
width: 800px;
border:1px dashed #000;
}
.ss{height: 25px;
width: 100px;
margin:10px;
position:relative;}
.button {
height: 25px;
width: 100px;
background:#666;
border:1px solid #000;
color:#FFF;
text-align:center;
line-height:25px;
cursor:pointer;
}.s_h {
height: 90px;
width: 90px;
padding:5px;
border:1px solid #000;
position:absolute;
top:26px;
background:#CCC;
display:none;
left:0;
}.asdf {
height: 400px;
width: 100%;
border:1px solid #006;
background:#fff;
}
</style>
</head><body>
<div class="outer">
<div tabindex="1" class="ss f_l">
<div class="button">展开菜单</div>
<div class="s_h">此处显示菜单的内容</div>
</div>
<div class="asdf f_l">
<strong class="f_l" style="margin:50px; font-size:30px; margin-top:50px;">如果我在这里点击菜单应该关闭，但是在下面的iframe中点了没用</strong>
<iframe class="f_l" style="border:1px dashed #000;" width="100%" frameborder="1" height="300" src="http://www.baidu.com"></iframe>
</div>
</div>
<script type="text/javascript">
$('.button').click(
function(){
$('.s_h').stop(true,true).slideToggle(200);
}
);
$('.ss').blur(function(){$('.s_h').hide()});
$('.asdf').click(
function(){
$('.s_h').slideUp(200);
}
);
</script>
</body>
</html>
对于这个代码用到的能否转移到限点击id="ad"区域才执行吗,现在这个代码点击任意位置都会执行,这不是我想要的效果

src="http://www.baidu.com"
再说一次：跨域了啊!!!!!!!!!!!

这问题我解决了，还是看的资料，未懂之前我完全用的javascript，浪费了很多代码，http://www.myexception.cn/web/871383.html

调试易

【JS/Jquery】点击事件如何对【iframe】里面的元素生效

解决方案 »