jQuery 的选择器在 iframe 中不起作用
Posted
技术标签:
【中文标题】jQuery 的选择器在 iframe 中不起作用【英文标题】：jQuery's selector doesn't work in iframe 【发布时间】：2011-12-04 00:01:24 【问题描述】：我在iframe 片段中有代码（由 ajax 加载），但只有$(".teacherBtn") 可以正常工作并正确绑定事件处理程序。但是回调函数中的这些选择器将不起作用。只有第二个console.dir($(this)) 有正确的输出。我已将 jquery lib 加载为普通页面。
$ 函数似乎在父窗口的文档树中找到了expression。但是我在一个简单的文件中对此进行了测试，它显示当在iframe's 文档中加载 jq 库时，该函数将在子窗口的文档树中工作。我认为范围或窗口元素一定有问题，但我不知道如何解决。
我也想知道再次导入 jq lib 和使用 $ = parent.$ 有什么区别。我以为$只是一个函数，但结果是在导入lib时，$("exp")会在iframe中找到元素，$ = parent.$会在父窗口的标签中。
<script type="text/javascript">
$(function()
$(".teacherBtn").bind('click',function()
console.dir($("#questRange"));
console.dir($(this));
console.dir($(".teacherBtn"));
);
);
</script>
所有这些.teacherBtn #questRange 都在iframe 片段中。这是 html 文档，它们位于 iframe 片段中。我使用了一个帮助弹出窗口的 jq 插件，它包含在 iframe 部分中。我真的不想用iframe。
<!doctype html>
<html>
<head>
<style type="text/css">
//some details
</style>
<script type="text/javascript" src="./js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function()
$(".teacherBtn").bind('click',function()
console.dir($("#questRange")); //it works when change the id to that occured in parent window (out of iframe).
console.dir($(this));
console.dir($(".teacherBtn"));
);
);
</script>
</head>
<body>
<div id="teacherCtrl">
<form name="questOpt" id="questOpt" action="questCtrl.php" method='post'>
<div id="questRange" class='optSection'>
//some details
</div>
<div id="questCtrl" class='optSection'>
//some details
</div>
<div id='questType' class='optSection'>
//some details
</div>
<input type="button" value="show" id="showPaper" name="showPaper" class="teacherBtn"/>
<input type="button" value="download" id="downDoc" name="downDoc" class="teacherBtn" />
<input type="button" value="submit" id="olTestOpt" name="olTestOpt" class="teacherBtn"/>
</form>
</div>
</body>
</html>
这些代码将被加载到<iframe width="100%" scrolling="auto" frameborder="0" src="test/teacher.php" name="1991_content" id="1991_content" style="height: 495px;"></iframe> 片段。 iframe 由 jq 插件创建。
【问题讨论】：
我很困惑。如果您已经知道如何使用 Ajax 加载内容，那您到底为什么需要 iframe？ @RobW 感谢您的关注。我已经对其进行了编辑并添加了必要的信息。 @Sparky672 感谢您的关注。我已经对其进行了编辑并添加了必要的信息。 @Sparky672 也感谢您编辑我的帖子。我不是以英语为母语的人，也不是 *** 的新手，所以为我的错误道歉。 【参考方案1】：试试：
$("iframe").contents().find(/* selector goes here */);
将 "iframe" 替换为您将用于查找框架的 CSS 选择器。
【讨论】：
以上是关于jQuery 的选择器在 iframe 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的 jQuery :not() 选择器在 CSS 中不起作用？
为啥我的 jQuery :not() 选择器在 CSS 中不起作用？