Измените размер iframe высоты согласно высоте содержания в нем
Две полезные идеи: (1) объекты : если когда-нибудь это будет настоящая система, а данные из службы представляют группы людей, то код должен сказать это тоже. В качестве примера я включил простой объект Person, который знает, как создать себя из плоского представления, и знает, как отобразить себя на консоли. (2) порядок ключей не определен в объекте JS. Чтобы получить значения из специально упорядоченных ключей, необходимо указать порядок. Метод person print() делает это с помощью массива.
См. Здесь, на подмножестве данных ...
$.getJSON("http://localhost:8000/data.json", function(data) {
print_items(data);
});
class Person {
constructor(data) {
this.id = Object.keys(data)[0];
this.state = data[this.id][0];
}
print() {
console.log(this.id);
let displayKeys = ['name', 'registration_1', 'registration_2', 'week', 'half_term'];
displayKeys.forEach(key => console.log(this.state[key]));
}
asTableRow() {
let displayKeys = ['name', 'registration_1', 'registration_2', 'week', 'half_term'];
let tds = displayKeys.map(key => `<td>${this.state[key]}</td>`);
return `<tr>${tds}</tr>`;
}
}
function print_items(data) {
Object.keys(data).forEach(groupKey => {
let group = data[groupKey];
Object.keys(group).forEach(personKey => {
let person = new Person(group[personKey]);
person.print();
});
});
}
7 ответов
Можно сделать это с JavaScript.
document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px";
Установка содержание IFRAME является видом легкой вещи к , находит на Google . Вот одно решение :
<script type="text/javascript">
function autoIframe(frameId) {
try {
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10;
}
catch(err) {
window.status = err.message;
}
}
</script>
Это, конечно, не решает междоменную проблему, которую Вы имеете... Установка document.domain могла бы помочь, если эти сайты находятся в том же месте. Я не думаю, что существует решение, если Вы - iframe-луг случайные сайты.
Попытайтесь использовать scrolling=no атрибут на теге iframe. Mozilla также имеет overflow-x и overflow-y свойство CSS, которое можно изучить.
С точки зрения высоты, Вы могли также попробовать height=100% на теге iframe.
Непосредственно ответить на Ваши два дополнительных вопроса: Нет, Вы не можете сделать этого с Ajax, и при этом Вы не можете вычислить его с PHP.
То, что я сделал в прошлом, является использованием триггер от iframe'd страницы в window.onload (НЕТ domready, поскольку это может требовать времени для изображений для загрузки) передать высоту тела страницы родителю.
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
Затем parent.resizeIframe похож на это:
function resizeIframe(newHeight)
{
document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}
И вуаля, у Вас есть устойчивый resizer, который инициировал, после того как страница полностью представляется без противного contentdocument по сравнению с contentWindow игра :)
Несомненно, теперь люди будут видеть Ваш iframe на высоте по умолчанию сначала, но это может быть легко обработано путем сокрытия iframe в первом и просто показа 'загружающегося' изображения. Затем когда resizeIframe функция умирает, поместите две дополнительных строки там, которые скроют загружающееся изображение, и показывать iframe для того поддельного взгляда Ajax.
Конечно, это только работает от того же домена, таким образом, можно хотеть иметь Сценарий PHP прокси для встраивания этого материала, и после того как Вы идете туда, Вы могли бы также просто встроить канал RSS своего блога непосредственно в Ваш сайт с PHP.
Ниже мой обработчик событий onload .
Я использую IFRAME в диалоговом окне jQuery UI . Различные способы использования потребуют некоторых корректировок. Кажется, это помогает мне (на данный момент) в Internet Explorer 8 и Firefox 3.5. Возможно, потребуется дополнительная настройка, но общая идея должна быть ясной.
function onLoadDialog(frame) {
try {
var body = frame.contentDocument.body;
var $body = $(body);
var $frame = $(frame);
var contentDiv = frame.parentNode;
var $contentDiv = $(contentDiv);
var savedShow = $contentDiv.dialog('option', 'show');
var position = $contentDiv.dialog('option', 'position');
// disable show effect to enable re-positioning (UI bug?)
$contentDiv.dialog('option', 'show', null);
// show dialog, otherwise sizing won't work
$contentDiv.dialog('open');
// Maximize frame width in order to determine minimal scrollHeight
$frame.css('width', $contentDiv.dialog('option', 'maxWidth') -
contentDiv.offsetWidth + frame.offsetWidth);
var minScrollHeight = body.scrollHeight;
var maxWidth = body.offsetWidth;
var minWidth = 0;
// decrease frame width until scrollHeight starts to grow (wrapping)
while (Math.abs(maxWidth - minWidth) > 10) {
var width = minWidth + Math.ceil((maxWidth - minWidth) / 2);
$body.css('width', width);
if (body.scrollHeight > minScrollHeight) {
minWidth = width;
} else {
maxWidth = width;
}
}
$frame.css('width', maxWidth);
// use maximum height to avoid vertical scrollbar (if possible)
var maxHeight = $contentDiv.dialog('option', 'maxHeight')
$frame.css('height', maxHeight);
$body.css('width', '');
// correct for vertical scrollbar (if necessary)
while (body.clientWidth < maxWidth) {
$frame.css('width', maxWidth + (maxWidth - body.clientWidth));
}
var minScrollWidth = body.scrollWidth;
var minHeight = Math.min(minScrollHeight, maxHeight);
// descrease frame height until scrollWidth decreases (wrapping)
while (Math.abs(maxHeight - minHeight) > 10) {
var height = minHeight + Math.ceil((maxHeight - minHeight) / 2);
$body.css('height', height);
if (body.scrollWidth < minScrollWidth) {
minHeight = height;
} else {
maxHeight = height;
}
}
$frame.css('height', maxHeight);
$body.css('height', '');
// reset widths to 'auto' where possible
$contentDiv.css('width', 'auto');
$contentDiv.css('height', 'auto');
$contentDiv.dialog('option', 'width', 'auto');
// re-position the dialog
$contentDiv.dialog('option', 'position', position);
// hide dialog
$contentDiv.dialog('close');
// restore show effect
$contentDiv.dialog('option', 'show', savedShow);
// open using show effect
$contentDiv.dialog('open');
// remove show effect for consecutive requests
$contentDiv.dialog('option', 'show', null);
return;
}
//An error is raised if the IFrame domain != its container's domain
catch (e) {
window.status = 'Error: ' + e.number + '; ' + e.description;
alert('Error: ' + e.number + '; ' + e.description);
}
};
Вот мое решение проблемы с использованием MooTools, которое работает в Firefox 3.6, Safari 4.0.4 и Internet Explorer 7:
var iframe_container = $('iframe_container_id');
var iframe_style = {
height: 300,
width: '100%'
};
if (!Browser.Engine.trident) {
// IE has hasLayout issues if iframe display is none, so don't use the loading class
iframe_container.addClass('loading');
iframe_style.display = 'none';
}
this.iframe = new IFrame({
frameBorder: 0,
src: "http://www.youriframeurl.com/",
styles: iframe_style,
events: {
'load': function() {
var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
var h = this.measure(function(){
return innerDoc.body.scrollHeight;
});
this.setStyles({
height: h.toInt(),
display: 'block'
});
if (!Browser.Engine.trident) {
iframe_container.removeClass('loading');
}
}
}
}).inject(iframe_container);
Создайте для класса «загрузка» стиль, чтобы в середине контейнера iframe отображалось изображение загрузки Ajax. Затем для браузеров, отличных от Internet Explorer, он будет отображать IFRAME во всю высоту после завершения загрузки его содержимого и удалит загрузочную графику.
Уловка состоит в том, чтобы получить все необходимые события iframe из внешнего скрипта. Например, у вас есть сценарий, который создает iFrame с помощью document.createElement; в этом же скрипте у вас есть временный доступ к содержимому iFrame.
var dFrame = document.createElement("iframe");
dFrame.src = "http://www.example.com";
// Acquire onload and resize the iframe
dFrame.onload = function()
{
// Setting the content window's resize function tells us when we've changed the height of the internal document
// It also only needs to do what onload does, so just have it call onload
dFrame.contentWindow.onresize = function() { dFrame.onload() };
dFrame.style.height = dFrame.contentWindow.document.body.scrollHeight + "px";
}
window.onresize = function() {
dFrame.onload();
}
Это работает, потому что dFrame остается в области действия этих функций, предоставляя вам доступ к внешнему элементу iFrame из области действия кадра, позволяя вам видеть фактическую высоту документа и при необходимости расширять ее. Этот пример будет работать в firefox, но больше нигде; Я мог бы дать вам обходные пути, но вы можете решить остальное;)