Я открываю страницу своего блога на своем веб-сайте. Проблема в том, что я могу дать ширину iframe, но высота должна быть динамической, чтобы в iframe не было полосы прокрутки, и она выглядит как одна страница …
Я пробовал различный JavaScript-код для расчета высоты содержимого, но все они дают разрешение на отказ в доступе и бесполезно.
<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe> Можем ли мы использовать Ajax для расчета высоты или, возможно, с помощью PHP?
Чтобы напрямую ответить на ваши два подзапроса: Нет, вы не можете сделать это с помощью Ajax и не можете рассчитать его с помощью PHP.
То, что я делал в прошлом, это использовать триггер с страницы iframe'd в window.onload (NOT domready , так как может потребоваться некоторое время для загрузки изображений), чтобы передать высоту страницы родительской.
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
Затем parent.resizeIframe выглядит так:
function resizeIframe(newHeight) { document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px'; }
Et voila, у вас есть надежный resizer, который запускается после того, как страница полностью отображена без какого-либо неприятного contentWindow fiddling 🙂
Конечно, теперь люди сначала будут видеть ваш iframe на высоте по умолчанию, но это можно легко обработать, сначала спрятав ваш iframe и просто показывая изображение загрузки. Затем, когда функция resizeIframe две дополнительные строки, которые будут скрывать загружаемое изображение, и покажите iframe для этого искусственного Ajax-вида.
Конечно, это работает только из одного домена, поэтому вы можете захотеть создать прокси-скрипт PHP для встраивания этого материала, и как только вы отправитесь туда, вы можете просто вставлять RSS-канал своего блога прямо на ваш сайт с помощью PHP.
Вы можете сделать это с помощью 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.
Вот мое решение проблемы с помощью 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);
Стиль класса «загрузка» отображает графику загрузки Ajax в середине контейнера iframe. Затем для браузеров, отличных от Internet Explorer, он отобразит полноразмерный IFRAME после завершения загрузки его содержимого и удаления графика загрузки.
Ниже мой обработчик события onload .
Я использую IFRAME в диалоговом окне интерфейса jQuery . Различные способы использования потребуют определенных корректировок. Кажется, это делает трюк для меня (пока) в 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); } };
Как динамически настраивать высоту iframe действительно просто и проверено мной.
@ Ответ SchizoDuckie очень изящный и легкий, но из-за отсутствия поддержки Webkit для scrollHeight (см. Здесь ), не работает в браузерах на основе Webkit (Safari, Chrome, различных и разных мобильных платформах).
Для этой основной идеи работы с Webkit наряду с браузерами Gecko и Trident, нужно только заменить
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
с
<body onload='parent.resizeIframe(document.body.offsetHeight)'>
Пока все находится в одном домене, это работает очень хорошо.
Я просто провел большую часть борьбы за 3 дня с этим. Я работаю над приложением, которое загружает другие приложения в себя, сохраняя фиксированный заголовок и фиксированный нижний колонтитул. Вот что я придумал. (Я также использовал EasyXDM с успехом, но позже вытащил его, чтобы использовать это решение.)
Обязательно запустите этот код ПОСЛЕ <iframe> в DOM. Поместите его на страницу, которая вставляет iframe (родительский).
// get the iframe var theFrame = $("#myIframe"); // set its height to the height of the window minus the combined height of fixed header and footer theFrame.height(Number($(window).height()) - 80); function resizeIframe() { theFrame.height(Number($(window).height()) - 80); } // setup a resize method to fire off resizeIframe. // use timeout to filter out unnecessary firing. var TO = false; $(window).resize(function() { if (TO !== false) clearTimeout(TO); TO = setTimeout(resizeIframe, 500); //500 is time in miliseconds });
Хитрость заключается в том, чтобы получить все необходимые события 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, но нигде больше; Я мог бы дать вам обходные пути, но вы можете выяснить остальное;)
Попробуйте это, вы можете изменить, даже если хотите. в этом примере используйте jQuery.
$('#iframe').live('mousemove', function (event) { var theFrame = $(this, parent.document.body); this.height($(document.body).height() - 350); });
Попробуйте использовать атрибут scrolling=no в теге iframe. Mozilla также имеет свойство CSS overflow-x и overflow-y вы можете изучить.
С точки зрения высоты вы также можете попробовать height=100% в теге iframe.