Разверните DIV вертикально, который содержит iFrame - PullRequest
Новая
       2

Разверните DIV вертикально, который содержит iFrame

2 голосов
/ 13 января 2012

http://jsfiddle.net/fJkBU/1/

Это мой код. По сути, у меня есть iFrame, источник которого может измениться. Мне нужно, чтобы содержащий DIV расширялся вертикально, чтобы вместить все, что находится внутри iFrame.

Я не могу заставить его работать. Есть идеи?

МОЙ КОД 

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails: Welcome aboard</title>
  </head>
  <body>
    <div id="page">
      <div id="content">

        <div id='commentLoader' style="width: 500px;">
            <iframe id="commentIframe" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
        </div>
      </div>
    </div>
  </body>
</html>

Ответы [ 7 ]

12 голосов
/ 18 января 2012

Все остальные методы не будут работать , потому что ...

... Mozilla (и все другие основные браузеры, как указано в комментарии Пейсли) имеет эту вещь, называемую «Одинаковая политика происхождения» , которая гласит:

Такая же политика происхождения не позволяет документу или сценарию, загруженному из одного источника, получать или задавать свойства документа из другого источника.

По сути, Mozilla гарантирует, что вы не можете получить доступ к свойствам другой веб-страницы через JavaScript, потому что это может представлять угрозу безопасности (для кражи файлов cookie и тому подобное).

Например, здесьбыл похожий вопрос при обсуждении фрейма для страницы того же происхождения;вот ответ применительно к вашей проблеме .Как вы можете видеть в консоли ошибок Firefox, ваше «разрешение на доступ к документу свойств запрещено» ...

Хорошо, теперь у вас есть несколько вариантов, и вы знаете, что не можете получить доступ к высоте iframe через JavaScript(, поскольку он размещен в другом домене ):

  1. Измените его, чтобы контролировать содержимое iframe (затем поместите его в тот же домен или воспользуйтесь размещенным решениемв аналогичном вопросе ).

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

    • Если вы не хотите писать скребок для экрана, вы можете использовать прокси-скрипт и затем отобразить iframeваш прокси (размещенный на том же сервере);это позволит вам получить доступ к сайту, как если бы он был вашим собственным, и пользователь не заметит никакой разницы ( Примечание: Я почти уверен, что это противоречит всем условиям обслуживания / возможно, незаконно как пользовательможет попытаться взаимодействовать с веб-сайтом (если он не загружен через прокси-сервер) в iframe (то есть при входе в систему) ... и вы будете эффективно фишинговать)

  3. ЯПредполагая, что в iframe загружен набор комментариев (идентификаторы вроде его выдавали), я также позволю себе предположить, что каждый комментарий имеет фиксированную высоту или максимальную высоту.В этом случае вы можете написать php-скрипт, который загружает страницу, подсчитывает количество комментариев (регулярное выражение) и затем умножает число на высоту комментария, чтобы определить соответствующую высоту iframe

Удачи,

0 голосов
/ 24 января 2012

Вы можете изменить размер iframe на основе его содержимого , принятый ответ на этот вопрос Stackoverflow немного сложен, но он работает.

0 голосов
/ 24 января 2012

У вас есть одинарные кавычки вокруг вашего идентификатора CSS.Замените их двойными кавычками, как и остальной код.

Измените: 

id='commentLoader'

на: 

id="commentLoader"
0 голосов
/ 21 января 2012

Я не уверен, что получу ваш ответ на 100%, но если вам нужен контейнер, который расширяется по вертикали из-за содержимого, вы можете использовать jquery ajax.когда вы загружаете контент внутри, он генерирует новую высоту.придайте этому div какой-то стиль, и вы получите динамически генерируемую высоту div.в основном, вы возьмете эту другую страницу и поместите ее на свою.

Выполните поиск междоменного ajax.Я использовал это в прошлом, и это было не красиво, но работало!

0 голосов
/ 19 января 2012

Если iFrame загружен из того же домена, вы можете попробовать сценарий Iframe SSI II .Я использовал этот сценарий назад для проекта класса, но вы можете попробовать его.

0 голосов
/ 18 января 2012

Самое большее, вы получите iFrame, который будет размером окна, а не высотой содержимого. И, как вы, кажется, хотите, чтобы он расширялся, почему бы просто не сделать iFrame 100% высоты окна с самого начала?

0 голосов
/ 18 января 2012

Вызовите нижеприведенную функцию Javascript в событии загрузки Iframe. 

function autoResize(id)
    {
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
    }
    document.getElementById(id).height= (newheight) + "px";
}

например: 

<iframe id="commentIframe"  onload="autoResize('commentIframe')" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...