Я пробовал несколько решений, но не был успешным. Мне интересно, есть ли там решение, желательно с простым в использовании учебником.
Существует ли межсегментный авторезистор высоты iframe, который работает?
Ответ 1
У вас есть три варианта:
1. Используйте iFrame-resizer
Это простая библиотека для сохранения размера iFrames в соответствии с их содержимым. Он использует API PostMessage и MutationObserver с запасными вариантами для IE8-10. Он также имеет параметры для страницы содержимого, чтобы запросить содержание iFrame определенного размера, а также может закрыть iFrame, когда вы закончите с ним.
https://github.com/davidjbradshaw/iframe-resizer
2. Используйте Easy XDM (PostMessage + Flash Combo)
Easy XDM использует набор приемов для обеспечения междоменной связи между различными окнами в ряде браузеров, и есть примеры использования его для изменения размера iframe:
http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/
http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/
Easy XDM работает с использованием PostMessage в современных браузерах и решения на основе Flash в качестве запасного варианта для старых браузеров.
См. также fooobar.com/questions/20201/... (есть и другие, это часто задаваемый вопрос). Кроме того, Facebook, похоже, использует аналогичный подход.
3. Общаться через сервер
Другой вариант - отправить высоту iframe на ваш сервер, а затем опросить его с родительской веб-страницы с помощью JSONP (или, если возможно, использовать длинный опрос).
Ответ 2
Я получил решение для установки высоты iframe динамически на основе его содержимого. Это работает для междоменного контента. Для достижения этой цели необходимо выполнить несколько шагов.
Предположим, вы добавили iframe на веб-страницу "abc.com/page"
<div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>Далее вам нужно привязать событие windows "message" под веб-страницей "abc.com/page"
window.addEventListener('message', function (event) {
//Here We have to check content of the message event for safety purpose
//event data contains message sent from page added in iframe as shown in step 3
if (event.data.hasOwnProperty("FrameHeight")) {
//Set height of the Iframe
$("#IframeId").css("height", event.data.FrameHeight);
}
});
При загрузке iframe вы должны отправить сообщение в содержимое окна iframe с сообщением "FrameHeight":
function setIframeHeight(ifrm) {
var height = ifrm.contentWindow.postMessage("FrameHeight", "*");
}
- На главной странице, которая добавлена в iframe здесь "xyz.pqr/contactpage", вы должны привязать событие windows "message", где все сообщения будут получать из родительского окна "abc.com/page"
window.addEventListener('message', function (event) {
// Need to check for safety as we are going to process only our messages
// So Check whether event with data(which contains any object) contains our message here its "FrameHeight"
if (event.data == "FrameHeight") {
//event.source contains parent page window object
//which we are going to use to send message back to main page here "abc.com/page"
//parentSourceWindow = event.source;
//Calculate the maximum height of the page
var body = document.body, html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
// Send height back to parent page "abc.com/page"
event.source.postMessage({ "FrameHeight": height }, "*");
}
});
Ответ 3
То, что я сделал, это сравнить ширину scramWidth iframe, пока она не изменит размер, в то время как я постепенно увеличиваю высоту IFrame. И это сработало для меня. Вы можете настроить приращение на желаемое.
<script type="text/javascript">
function AdjustIFrame(id) {
var frame = document.getElementById(id);
var maxW = frame.scrollWidth;
var minW = maxW;
var FrameH = 100; //IFrame starting height
frame.style.height = FrameH + "px"
while (minW == maxW) {
FrameH = FrameH + 100; //Increment
frame.style.height = FrameH + "px";
minW = frame.scrollWidth;
}
}
</script>
<iframe id="RefFrame" onload="AdjustIFrame('RefFrame');" class="RefFrame"
src="http://www.YourUrl.com"></iframe>
Ответ 4
Вот мое простое решение на этой странице. http://lab.ohshiftlabs.com/iframesize/
Вот как это работает:
В принципе, если вы можете редактировать страницу в другом домене, вы можете разместить другую страницу iframe, принадлежащую вашему серверу, которая сохраняет высоту в файлы cookie. С интервалом чтения файлов cookie, когда он обновляется, обновите высоту iframe. Это все.
Скачать; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip
Ответ 5
Я нашел другое серверное решение для веб-разработчиков, использующих PHP, чтобы получить размер iframe.
Сначала используется сервер script PHP для внешнего вызова через внутреннюю функцию: (например, file_get_contents, но curl и dom).
function curl_get_file_contents($url,$proxyActivation=false) {
global $proxy;
$c = curl_init();
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7");
curl_setopt($c, CURLOPT_REFERER, $url);
curl_setopt($c, CURLOPT_URL, $url);
curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
if($proxyActivation) {
curl_setopt($c, CURLOPT_PROXY, $proxy);
}
$contents = curl_exec($c);
curl_close($c);
$dom = new DOMDocument();
$dom->preserveWhiteSpace = false;
@$dom->loadHTML($contents);
$form = $dom->getElementsByTagName("body")->item(0);
if ($contents) //si on a du contenu
return $dom->saveHTML();
else
return FALSE;
}
$url = "http://www.google.com"; //Exernal url test to iframe
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
#iframe_reserve {
width: 560px;
height: 228px
}
</style>
</head>
<body>
<div id="iframe_reserve"><?php echo curl_get_file_contents($url); ?></div>
<iframe id="myiframe" src="http://www.google.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="overflow:none; width:100%; display:none"></iframe>
<script type="text/javascript">
window.onload = function(){
document.getElementById("iframe_reserve").style.display = "block";
var divHeight = document.getElementById("iframe_reserve").clientHeight;
document.getElementById("iframe_reserve").style.display = "none";
document.getElementById("myiframe").style.display = "block";
document.getElementById("myiframe").style.height = divHeight;
alert(divHeight);
};
</script>
</body>
</html>
Вам нужно отобразить под div (iframe_reserve) html, сгенерированный вызовом функции, с помощью простого echo curl_get_file_contents("location url iframe","activation proxy")
После этого функция события body onload с javascript занимает высоту страницы iframe только с простым управлением содержимым div (iframe_reserve)
Итак, я использовал divHeight = document.getElementById("iframe_reserve").clientHeight;, чтобы получить высоту внешней страницы, которую мы собираемся вызывать после маскировки контейнера div (iframe_reserve). После этого мы загружаем iframe с его хорошей высотой, что все.
Ответ 6
У меня есть script, который падает в iframe с его содержимым. Он также гарантирует, что iFrameResizer существует (он вводит его как script), а затем выполняет изменение размера.
Ниже я рассмотрю упрощенный пример.
// /js/embed-iframe-content.js
(function(){
// Note the id, we need to set this correctly on the script tag responsible for
// requesting this file.
var me = document.getElementById('my-iframe-content-loader-script-tag');
function loadIFrame() {
var ifrm = document.createElement('iframe');
ifrm.id = 'my-iframe-identifier';
ifrm.setAttribute('src', 'http://www.google.com');
ifrm.style.width = '100%';
ifrm.style.border = 0;
// we initially hide the iframe to avoid seeing the iframe resizing
ifrm.style.opacity = 0;
ifrm.onload = function () {
// this will resize our iframe
iFrameResize({ log: true }, '#my-iframe-identifier');
// make our iframe visible
ifrm.style.opacity = 1;
};
me.insertAdjacentElement('afterend', ifrm);
}
if (!window.iFrameResize) {
// We first need to ensure we inject the js required to resize our iframe.
var resizerScriptTag = document.createElement('script');
resizerScriptTag.type = 'text/javascript';
// IMPORTANT: insert the script tag before attaching the onload and setting the src.
me.insertAdjacentElement('afterend', ifrm);
// IMPORTANT: attach the onload before setting the src.
resizerScriptTag.onload = loadIFrame;
// This a CDN resource to get the iFrameResizer code.
// NOTE: You must have the below "coupled" script hosted by the content that
// is loaded within the iframe:
// https://unpkg.com/[email protected]/js/iframeResizer.contentWindow.min.js
resizerScriptTag.src = 'https://unpkg.com/[email protected]/js/iframeResizer.min.js';
} else {
// Cool, the iFrameResizer exists so we can just load our iframe.
loadIFrame();
}
}())
Затем содержимое iframe можно вводить в любом месте на другой странице/сайте с помощью script следующим образом:
<script
id="my-iframe-content-loader-script-tag"
type="text/javascript"
src="/js/embed-iframe-content.js"
></script>
Содержимое iframe будет введено ниже, где бы вы не разместили тег script.
Надеюсь, это кому-то поможет. 👍