Вот моя ситуация.
У меня есть файл с именем iframe.html
, который содержит код для слайд-шоу изображений.
Код несколько похож на
<html>
<head>
<!-- Have added title and js files (jquery, slideshow.js) etc. -->
</head>
<body>
<!-- Contains the images which are rendered as slidehow. -->
<!-- have hierarchy like 'div' inside 'div' etc. -->
</body>
</html>
Пользователи могут использовать код вставки для добавления слайд-шоу в свои блоги или веб-сайты (могут быть из разных доменов). Скажем, пользователь должен встроить слайд-шоу в index.html
, добавить их, добавив следующие строки:
<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>
Это приведет к полному HTML-коду от iframe.html
до index.html
, теперь мне нужен способ доступа к элементам в iframe, чтобы настроить некоторые из их свойств.
Как и в коде, ширина и высота iframe задаются пользователем некоторыми фиксированными размерами. Я хотел бы настроить размер слайд-шоу (и изображений) в размере контейнера iframe. Каков наилучший способ сделать это?
Я попытался с успехом получить доступ к компонентам iframe из index.html
чем-то вроде
$('#iframe').contents();
но получите ошибку:
TypeError: Невозможно вызвать метод 'contents' из null
Итак, я думаю, чтобы реализовать логику в iframe.html
, где слайд-шоу должно проверять ширину и высоту родителя и соответственно устанавливать его высоту.
Я в значительной степени смущен, надеюсь, что мой вопрос имеет смысл для большинства. Пожалуйста, не стесняйтесь спрашивать дополнительные объяснения. Ваша помощь приветствуется.