防止iframe中的事件处理程序影响父窗口/页面(跳转/滚动到顶部)

时间:2016-06-29 22:35:30

标签: javascript jquery iframe

我想阻止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>

0 个答案:

没有答案