个人中心
gpt4 book ai didi

html - IFrame 中的滚动条不显示

转载 作者：行者123 更新时间：2023-11-28 04:37:01 25 4
gpt4 key购买 nike

我正在 Iframe 中加载 View 。但是当它呈现其中包含数据表的 View 时，滚动条没有显示，因此我无法在 IFrame 中看到表格的其余部分。我的代码如下:

查看导航:

<style>
  .scroller {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }
  /* The style for iframe varies */

  .scroller iframe {
    height: 250px;
    width: 100%;
  }
</style>
<script>
  function go(location) {
    document.getElementById('main_frame').src = location;
  }
</script>
<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">Pier Capitan</a>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <?php foreach($links as $link){ ?>
        <li>                        
          <a href="javascript:void(0)" onclick="go('<?php echo base_url().$link->access_rights ?>')"><?php echo strtoupper($link->access_rights) ?></a>
        </li>
        <?php } ?>

      </ul>

    </nav><!-- end of navbar collapse -->
  </div><!-- end of navbar header -->
</header>
<body style="overflow-y:scroll;"">
   <div class="col-md-12">
        <div class="scroller">  
            <iframe src="about:blank" id="main_frame" frameborder="0" scrolling="yes"></iframe>
        </div>
    </div>
</body>

购买 View :

<header class="navbar navbar-defualt navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- <a href="#" class="navbar-brand">Purchases</a> -->
      <a href="#" class="pull-left">Logout</a>
      <br>
      <div class="row">
        <div id="main" class="col-md-12">
          <h3>Purchase Window</h3>
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

            <div class="panel panel-primary">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    Add New Purchases
                  </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                  <ul>
                    <li>The titles are block, so you don't have to click the text part to activate it</li>
                    <li>Indicators for expand / collapsing items</li>
                    <li>Removed title links' obnoxious :hover  underlinings, and outlines.</li>
                  </ul>
                </div>
              </div>
            </div><!-- end of panel -->

            <div class="panel panel-primary">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    View Purchased Items
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                  <table id="table_purchased" class="table table-striped table-bordered table-condensed col-md-12" cellspacing="0" width="100%">
                    <thead>
                      <tr>
                        <th width="50px;">Id</th>
                        <th width="200px;">Item Name</th>
                        <th width="50px;">Amount</th>
                        <th width="100px;">Date Added</th>
                        <th width="100px;">Added By</th>
                        <th width="50px;">Transaction</th>
                        <th width="100px;">Branch</th>
                        <th width="100px;">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      <?php foreach($purchases as $purchase) { ?>
                      <tr>
                        <td><?php echo $purchase->id ?></td>
                        <td><?php echo $purchase->item_id ?></td>
                        <td><?php echo $purchase->amount ?></td>
                        <td><?php echo $purchase->date_added ?></td>
                        <td><?php echo $purchase->added_by ?></td>
                        <td><?php echo $purchase->trans_type ?></td>
                        <td><?php echo $purchase->branch_id ?></td>
                        <td>
                          <button class="btn btn-warning" onclick="edit_order(this)"><i class="glyphicon glyphicon-pencil"></i></button>
                          <button class="btn btn-danger" onclick="delete_order(<?php echo $purchase->id; ?>)"><i class="glyphicon glyphicon-remove"></i></button>
                        </td>
                      </tr>
                      <?php } ?>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

          </div><!-- end of panel group -->
        </div><!--  end of main-->
      </div><!-- end of row -->

    </div> <!-- end of header -->
  </div> <!-- end of container -->
</header>
<script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/chart.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/datatables/js/dataTables.bootstrap.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-ui.min.js');?>"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#table_purchased').DataTable({
      "order":[[0,"desc"]],
      "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
          return typeof i === 'string' ?
            i.replace(/[\$,]/g, '')*1 :
          typeof i === 'number' ?
            i : 0;
        };

        // Total over all pages
        total = api
          .column( 2 )
          .data()
          .reduce( function (a, b) {
          return intVal(a) + intVal(b);
        }, 0 );

        // Total over this page
        pageTotal = api
          .column( 2, { page: 'current'} )
          .data()
          .reduce( function (a, b) {
          return intVal(a) + intVal(b);
        }, 0 );

        // Update footer
        $( api.column( 7 ).footer() ).html(
          'Php '+parseFloat(pageTotal).toFixed(2)+' ( Php '+ parseFloat(total).toFixed(2) +' total)'
        );
      }
    });//end of DataTable
  });
</script>

“view_navigation”包含加载“purchase_view”的 IFrame。非常感谢您的帮助。

最佳答案

这是什么请正确关闭标签:

 <div class="col-md-12 scroller">
    <body style="overflow-y:scroll;>
    <iframe src="about:blank" id="main_frame" frameborder="0" scrolling="yes"></iframe>
    </div>
    </body>

试试这段代码:

    <body style="overflow-y:scroll;>
    <div class="col-md-12">
    <div class=" scroller">
        <iframe src="about:blank" id="main_frame" frameborder="0" scrolling="yes"></iframe>
        </div>
    </div>
        </body>


 .scroller iframe {
          height: 250px;
          width: 100%;
        }

关于html - IFrame 中的滚动条不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41422750/

25 4 0
文章推荐： c++ - 如何打印 JSON 数组
文章推荐： css - Bootstrap 导航栏
文章推荐： html - Bootstrap 弹出窗口中的组按钮
文章推荐： javascript - 将对象内的数组字符串化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com