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的设置高度只有一个滚动条，而{ - 1}}的内容只有一个，而不是 - 可能 - 两个。

偏移（）。顶部不返回页面加载的值

2 个答案: