在我的应用程序中,有一个下拉选择框包含URL,当用户从下拉列表中选择URL时,我需要在iframe中加载URL和内容大小。我需要根据内容增加iframe的高度,而不需要滚动条。有谁能告诉我如何在iframe中根据URL内容调整大小,以便没有滚动条?
在我的应用程序中,有一个下拉选择框包含URL,当用户从下拉列表中选择URL时,我需要在iframe中加载URL和内容大小。我需要根据内容增加iframe的高度,而不需要滚动条。有谁能告诉我如何在iframe中根据URL内容调整大小,以便没有滚动条?
iframes无法自动适应其目标内容的大小。换句话说:iframe的宽度或高度没有“auto”值,您必须指定框架的大小。
要解决这个问题,您需要事先知道内容的大小,以便在选择的URL旁边将其传递给iframe。您可以使用data-attributes来实现这一点。
HTML
<select id="frameURL">
<option value="http://www.url1.com/" data-cheight="600">URL 1</option>
<option value="http://www.url2.com/" data-cheight="750">URL 2</option>
<option value="http://www.url3.com/" data-cheight="1200">URL 3</option>
</select>
<iframe scrolling="no" style="display:none;" id="myFrame" src=""></iframe>
JS / jQuery
$("#frameURL").change(function(){
// get URL
var target = $(this).find("option:selected").val();
// default fixed Width of content area
var cntWidth = 500;
// get content height from data-cheight
var cntHeight = $(this).find("option:selected").attr("data-cheight");
// pass all attributes to the iframe
$("#myFrame").attr({
src: target,
width: cntWidth,
height: cntHeight
});
// hide iframe when src attribute is empty / no URL chosen
!$("#myFrame").attr("src") ? $("#myFrame").hide() : $("#myFrame").show();
});
点击此处查看工作模型:https://jsfiddle.net/xxgs901u/3/
你不能直接从父窗口访问iframe的内容。如果iframes的源是应用程序的内部页面,则可以使用跨文档消息传递来实现此目的。
在iframe中:
$(document).ready(function() {
parent.postMessage({ height: $('html').height(), width: $('html').width() }, "*");
});
$(document).ready(function() {
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
$('iframe').width(e.data.width);
$('iframe').height(e.data.height);
},false);
});
如果需要,如果iframe内容的大小发生更改,您可以发送更多的调整大小事件。