AutoHeight IFrame

Question

я хочу сделать страницу iframe, которая загружает страницу из других сайт. Я пытаюсь "JQuery iFrame Sizing", чтобы установить автоматическую высоту в iframe ... но это не удалось.

В чем проблема ...?

Это мой код:

on Head:
<script type="text/javascript" src="js/jquery.js" ></ script >
<script type="text/javascript" src="js/iframe.js"></script >

on Body:
<iframe scrolling="no" frameborder="0" width="1025" src="http://mydomain.com"/>
</iframe>

Answer 1

Да, из-за ограничений безопасности браузеров Javascript не имеет доступа к источнику iframe, загруженному из другого домена. Однако для этого есть обходной путь, не идеальный, но он работает.

Вы можете «перехитрить» браузер, используя простой локальный скрипт, который будет загружать и выводить содержимое mydomain.com. Затем укажите iframe src на этот скрипт. В этом случае браузер решит, что вы работаете с тем же доменом, и ограничения не будут применяться.

Итак, вместо этого:

<iframe scrolling="no" frameborder="0" width="1025" src="http://mydomain.com" />

Вы можете попробовать что-то вроде этого:

<iframe scrolling="no" frameborder="0" width="1025" src="/local-script.php?url=http%3A%2F%2Fmydomain.com" />

Затем вы можете добавить простую логику в local-script.php, который загружает содержимое домена / документа, который вы хотите, и все должно быть в порядке. ЛМК, если вам нужен пример скрипта PHP.

Answer 2

Это возможно, но не прямо. Я знаю, что контейнер Shindig opensocial делает нечто подобное. Гаджеты, размещенные в iframe, могут запросить, чтобы контейнер динамически изменял размер iframe в ответ на изменения содержимого гаджета внутри iframe.

Код для обработки этого кода находится в репозитории shindig svn в dynamic-height.js и dynamic-height-util.js .

Надеюсь, вы сможете извлечь что-то полезное оттуда.

Answer 3

ОК, мое решение установить iframe на его содержимое, учитывая, что у вас есть перекрестный доступ, или, если нет, возможно, вы можете в своем php-файле добавить этот заголовок:

header("Access-Control-Allow-Origin: *");

Таким образом, JS-код для изменения размера будет следующим:

function resizeFrame(f) {
     var size = f.contentWindow.frameElement.clientHeight;
     f.style.height = size + "px";              
     }

затем вызовите resizeFrame (идентификатор ссылки)

Answer 4

может быть немного поздно, так как все остальные ответы старше :-) но ... вот мое решение. Проверено в реальных FF, Chrome и Safari 5.0

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

Надеюсь, это кому-нибудь поможет.

Answer 5

Первые две строки оригинальный сайт :

Примечание : из-за безопасности браузера ограничения, связанные с кросс-сайт сценарии, это решение работает только для содержимого страницы iframe , вызываемой из того же домена