jQuery:引导模式中的100%高度iframe
jQuery:引导模式中的100%高度iframe
提问于 2018-06-09 22:25:29
我有一个php脚本，可以生成要打印的文档。我正在尝试将此脚本转换为100%宽和高的bootstrap 4模式，以便客户端可以检查内容，然后将其打印出来。
<button type="button" id="print_modal" class="btn btn-primary" data-toggle="modal" data-target="#printmodal">Result</button>
<div class="modal fade" id="printmodal">
<div class="modal-dialog" style="max-width:210mm !important">
<div class="modal-content">
<div class="modal-header">
<button class="btn btn-primary ml-1" id="print_btn">Tisk</button>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body text-left" id="print_content">
<!-- IFRAME HERE -->
</div>
</div>
</div>
</div>我首先将iframe放入到模式中，何时填充(对于性能推理-有时它是一个非常长的文档)-这是有效的
$('#print_modal').click(function () {
$('#print_content').html('<iframe src="./index.php?print" frameborder="0" scrolling="no" id="print_frame"></iframe>');
});然后我需要设置100%高度的iframe元素。问题是下面的jquery脚本返回0高度。可能是因为默认情况下隐藏在modal中。
$("#print_frame").on("load", function () {
$(this).height($(this).contents().find("html").height());
});我需要像超时检查高度的iframe填充后，但我不知道如何。
不工作:
在生成的iframe上使用onload参数：(返回0px - modal可能比iframe append...)
<iframe src="./index.php?print" onload="ifrhgh()">
function ifrhgh(){
var iframehght = $("#print_frame").contents().height();
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-10 05:12:07
解决：的关键是在shown.bs.modal上创建iframe (加载成功后由模态触发的BS4事件)，然后onload parametr调用ifrhgh()函数，将iframe设置为等于内容
$(function () {
$('#printmodal').on('shown.bs.modal', function () {
$('#print_content').html('<iframe width="100%" onload="ifrhgh()" src="./index.php?print" frameborder="0" scrolling="no" id="print_frame"></iframe>');
});
});
function ifrhgh(){
var iframehght = $("#print_frame").contents().height();
$("#print_frame").height(iframehght);
}Stack Overflow用户
发布于 2018-06-09 23:02:37
这里的这一部分是由按钮触发的，该按钮也显示模式。因此，模式应该在iframe加载之前打开。
$('#print_modal').click(function () {
$('#print_content').html('<iframe src="./index.php?print" frameborder="0" scrolling="no" id="print_frame"></iframe>');
});所以这是可以的。
但是现在，关于第二部分，选择器#print_frame不存在于“页面加载”上，我认为这个处理程序就是在这里定义的。这是一个可以使用delegation解决的问题。
试试这个：
$(document).on("load","#print_frame",function(){
var iframeHeight = $(this).contents().height();
console.log(iframeHeight); // Check the console for that value.
$(this).height(iframeHeight);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50775267
复制相关文章
相似问题