我想阻止iframe中的切换事件导致父页面在点击时跳转到顶部。
由于以下代码,子页面本身不会这样做。但是,当我在iframe内部与它进行交互时;当我点击子页面中的切换按钮时,同一子页面会使带有iframe的父级跳到顶部。
我用过:
return false;
evt.preventDefault();
evt.stopPropagation();
如果我单独查看子页面,它们的工作正常。但是,代码无法阻止父页面跳到顶部。
子页面代码(Application Matrix PHP):
.documentBody
{
color: #808080;
padding: 0px 20px 0px 20px;
vertical-align: top;
}
.documentBody a
{
color: #0075a0;
text-decoration: none;
}
.documentBody a:hover
{
color: #0092c8;
}
.boxBodyArticulatedTrucks {
display: block;
height: 208px;
margin: auto;
background: url( "../assets/user-interface/articles/box/body/background/articulated-trucks.png" ) no-repeat center center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.boxBodyArticulatedTrucks:hover
{
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.questionForm
{
/*width: 587px;*/
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 20px;
}
.questionFormBody
{
/*background-color: #fbfbfb;
border: solid 1px #eeeeee;*/
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
display: none;
}
.btnAccordion
{
border: solid 1px #eeeeee;
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
padding-top: 20px;
background: url( "../assets/user-interface/articles/accordion/icons/down-arrow.png" ) no-repeat center right 20px #fbfbfb;
}
<div id="articulatedTruck">
<div class="documentBody">
<div class="btnAccordion">
Articulated Truck
</div>
</div>
<div class="questionForm">
<div id="questionFormBody0" class="questionFormBody">
<div style="padding-top: 26px; padding-bottom: 10px;">
1. What is the application(s)?
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#chkArticulatedTruck').change(function () {
$('#articulatedTruck').toggle(this.checked);
parent.setArticleSize();
return false; // Prevent page from jumping to the top
}).change(); // Ensure visible state matches initially
});
</script>
父页面代码:
<iframe id="article" src="./applications/application-matrix.php" width="627px" height="500px" frameborder="0" scrolling="no"></iframe>