Sử dụng iframe gây ra khuyết tật liên kết

Question

Tôi có một thanh điều hướng bên chuyển đổi để ẩn và hiển thị trên mỗi nhấp chuột trong thanh bên (chứa liên kết danh sách). Và một iframe nơi tôi đang hiển thị một trang web. khi tôi nhấp vào liên kết, nó sẽ ẩn thanh bên và chuyển hướng nó đến url tương ứng trong vùng iframe. Vấn đề là khi tôi hiển thị một số trang web bên trong khung nội tuyến, các liên kết của các trang web được chuyển hướng đó sẽ chỉ hoạt động trong nửa phần trên của iframe và còn lại trong nửa phần còn lại của liên kết khung nội tuyến bị tắt. khi tôi cuộn bên trong khung nội tuyến, tức là khi liên kết trong nửa dưới đến phần trên cùng, các liên kết được bật. Cần giúp đỡ.

.menu_sample { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     width: 100px; 
 
     border: solid 1px; 
 
     transition: transform 0.1s ease-out; 
 
    } 
 

 
    .content { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     right: 0; 
 
     left: 0; 
 
     padding: 10px; 
 
     transition: left 1s ease-out; 
 
     margin-left: -1.5%; 
 
     margin-top: 150%; 
 
    } 
 

 
    /*transition*/ 
 
    .top_mar { 
 
     margin-top: 25%; 
 
    } 
 

 
    /* on toggle*/ 
 
    .content.pushed { 
 
     left: 225px; 
 
    } 
 

 
    .hide { 
 
     transform:translateX(-100px); 
 
    }

<div class="menu_sample top_mar"> 
 
    <div class="col-sm-3 col-md-2 sidebar"> 
 
      <ul class="nav nav-sidebar"> 
 
     <li><span style="color:blue; font-weight:bold;">Dashboards</span></li> 
 
     {% for Dashboard in dashboards %} 
 
<li><a href="{{ Dashboard.d_url }}">{{ Dashboard.d_name }}</a></li> 
 
      {% endfor %} 
 
      </ul> 
 

 
     </div> 
 

 
    </div> 
 
    <div class="content pushed top_mar"> 
 
     <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button> 
 
</div> 
 

 
<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" > 
 
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe> 
 
</div>

Answer 1

.menu_sample { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     width: 100px; 
 
     border: solid 1px; 
 
     transition: transform 0.1s ease-out; 
 
    } 
 

 
    .content { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     right: 0; 
 
     left: 0; 
 
     padding: 10px; 
 
     transition: left 1s ease-out; 
 
     margin-left: -1.5%; 
 
     margin-top: 150%; 
 
    } 
 

 
    /*transition*/ 
 
    .top_mar { 
 
     margin-top: 25%; 
 
    } 
 

 
    /* on toggle*/ 
 
    .content.pushed { 
 
     left: 225px; 
 
    } 
 

 
    .hide { 
 
     transform:translateX(-100px); 
 
    }

<div class="menu_sample top_mar"> 
 
    <div class="col-sm-3 col-md-2 sidebar"> 
 
      <ul class="nav nav-sidebar"> 
 
     <li><span style="color:blue; font-weight:bold;">Dashboards</span></li> 
 
      
 
<li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li><li><a href="#">Link</a></li> 
 
      </ul> 
 

 
     </div> 
 

 
    </div> 
 
    <div class="content pushed top_mar" style="display:none"> 
 
     <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button> 
 
</div> 
 

 
<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" > 
 
<iframe width="100%" height="95%" name="iframe_a" frameborder="0" src="http://en.wikipedia.org/wiki/Help:Link"></iframe> 
 
</div>

vấn đề chính của bạn là <div class="content pushed top_mar">. Xin vui lòng kiểm tra các ảnh chụp màn hình đính kèm. Div này chồng chéo lên iframe của bạn đó là lý do tại sao các liên kết không hoạt động ở khu vực đó. Các liên kết phía trên div hoạt động như phần trên không nằm trong div.

Tôi không chắc mục đích của div cho ứng dụng của bạn là gì. Nếu tôi đặt display:none tất cả các liên kết bên trong khung nội tuyến có thể nhấp được.