Offset().top 不返回页面加载的值

Question

我正在开发一个具有多个 iframe 并且需要为各种屏幕动态固定高度的 Web 应用程序。

我尝试使用以下代码在页面内分配 iframe 的高度，

var y = $('#ordersfavld2').offset().top;
var z = document.documentElement.clientHeight;
var d = (z - (y + 5));
$('#ordersfavld2').css({ 'height': d, 'overflow-y': 'auto' });

此代码正在运行，并在重新加载 iframe 时返回一些“px”值，但在加载页面时返回“0px”。

为了方便大家理解，我附上了截图。

<div id="tab_3" class="tab-pane" style="overflow-y: hidden;">
  <iframe src="" width="100%" id="Iframe4" marginheight="0" frameborder="0"></iframe>
</div>

而iframe里面的页面内容是，

<div class="col-md-12" id="ordersfavld2">
<div class="portlet light bordered orders_right_portlet" id="OrdersHgt">
    <div class="portlet-body" id="OrdersHgt2">
        <div class="portlet-body" id="divlab">
                <table class="table table-hover table-bordered table-striped" id="orders_tbl">
                    <thead id="orderdisplay">
                        <tr align="center">
                            <th class="bluetxt" colspan="7" >
                                <b>ORDERS</b>
                            </th>
                        </tr>
                    </thead>
                    <tbody id="labdisp">
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portlet box green ext_ordr_port" id="Exsearchdisplay">
    <div class="portlet-title" id="labtitle">
        <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12 caption">
            <i class="fa fa-list"></i> EXISTING ORDERS
        </div>
        <div class="col-md-8 col-lg-8 col-sm-8 col-xs-12 radio_clm">
            <div class="form-inline">
                <div class="form-group">
                    <div class="col-md-12 col-sm-12 col-lg-12">
                        <label class="radio-inline">
                            <input type="radio" name="RdoInves" id="RdoInvesALL" checked onclick="fnRadioClick()" />ALL</label>
                        <label class="radio-inline">
                            <input type="radio" name="RdoInves" id="RdoLastOne" onclick="fnRadioClick()" />Last One Day</label>
                        <label class="radio-inline">
                            <input type="radio" name="RdoInves" id="RdoLastSeven" onclick="fnRadioClick()" />Last Seven Days</label>
                        <label class="radio-inline">
                            <input type="radio" name="RdoInves" id="RdoAganistvisit" onclick="fnRadioClick()" />Against Visit</label>
                        &nbsp;
                        <a href="javascript:;" class="fullscreen2" data-toggle="tooltip" data-original-title="" title="Expand" ><i class="fa fa-expand" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="portlet-body">
        <div class="table-container">
            <table class="table table-striped table-bordered table-hover" id="labtable">
                <thead>
                    <tr>
                        <th>Order No</th>
                        <th>Order Date</th>
                        <th>Doctor</th>
                        <th>Existing Orders</th>
                        <th>Clinical Detail & Presumptive Diagnosis</th>
                        <th>Company</th>
                        <th>Delete</th>
                        <th>Print</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

由于您使用的是 iframe，它必须在您的 HTML 中加载 HTML。当它加载 iframe 时，您的脚本可能会运行并将值返回为零。

所以在 winodow.load 中调用你的函数

谢谢！

Answer 2

为什么不为iframe 设置高度，让iframe 的内容的高度由其内容决定？

<div id="tab_3" class="tab-pane" style="overflow-y: hidden;">
    <iframe src="" width="100%" height="400" id="Iframe4" marginheight="0" frameborder="0"></iframe>
</div>

这样您的iframe 将设置一个高度，只有一个滚动条用于iframe 的内容，而不是 - 可能 - 两个。