Отобразить элемент с другой страницы на моем сайте с помощью .document.getElementById

Я искал эту тему уже несколько дней. И не мог найти рабочий или исчерпывающий ответ.

Что я хочу сделать, так это просто отобразить (стилизованную) сводку последней записи в блоге (со страницы блога на моем собственном сайте) в контейнере div на главной странице моего сайта (который не является моим блогом). Все активные ссылки этой зеркальной записи блога в идеале ведут в соответствующий раздел моей страницы блога. Однако это не обязательно, если вся запись может ссылаться на страницу блога.

Каждая сводка записи блога на странице сводки блога имеет уникальный идентификатор, отсортированный по номерам (например, unique-ID-51 (последний) unique-ID-50 (предыдущий) и т. д.). Я думал сделать это с помощью JS-команды document.getElementById.

Мне пришлось бы указать функции JS относительное местоположение (../blog_folder/blog_summary.html) с помощью, возможно, команды .window.location.assign, а затем захватить (стилизованное) содержимое последнего элемента и отобразить его на моей главной странице.

Но я понятия не имею, как этот код будет выглядеть в реальности. Можете ли вы указать мне правильное направление?

Спасибо !!!!!!!

M.


javascript mirror
person Wanni    schedule 14.05.2011    source источник
comment
Готовы ли вы использовать библиотеку, чтобы помочь? (jQuery, прототип и т. д.)   -  person T.J. Crowder    schedule 14.05.2011
comment
Я уверен, что я. поэкспериментировать с jquery   -  person Wanni    schedule 14.05.2011

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете добавить jQuery на свою страницу и использовать простую конструкцию:

$('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');

Пример куска кода:

...
<body>
  <div class="result-container">There will be your content from some file.</div>
  <p>
    <a class="result-loader" href="#"></a>
    <script type="text/javascript">
        $(".result-loader").click(function() {
             //Replace path/to/your/file.html and #id_of_element_to_fetch with appropriate values
             $('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');
             return false;
        });
    </script>
  </p>
</body>
...

И эта строка где-то внутри тега <head>:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

Пример кода с функцией автозапуска:

...
<body>
  <div class="result-container">There will be your content from some file.</div>
  <p>
    <a class="result-loader" href="#"></a>
    <script type="text/javascript">
        $(document).ready(function() { //Launches the code below right after the initialization event
             //Replace path/to/your/file.html and #id_of_element_to_fetch with appropriate values
             $('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');
             return false;
        });
    </script>
  </p>
</body>
...
person Daniel O'Hara    schedule 14.05.2011
comment
можете уточнить это? Я реализовал jQuery, но не совсем понимаю вашу строку кода.... Поместить ее в ‹div›? Что означает бит .result-container? имя моего нового div? и будет ли выбран целевой элемент (#id_of_element), если он является частью контейнера #content? - person Wanni; 14.05.2011
comment
поэтому, когда я делаю следующее: $('#result-container').load('path/to/your/file.html #id_of_element_to_fetch'); страница автоматически перенаправляется со стартовой страницы (где ДОЛЖЕН появляться загруженный контент) на целевую страницу (где контент должен ПРИХОДИТЬ ОТ). .... - person Wanni; 14.05.2011
comment
Добавил некоторые детали в мой ответ. - person Daniel O'Hara; 14.05.2011
comment
Большое спасибо - я намного дальше, чем несколько дней назад... хорошо, теперь это работает по клику - после вставки текста ССЫЛКИ... (я имею в виду свой собственный jQuery (1.6.1. мин) хотя.). Он загружает текст записи в блоге, H1, все теги и т. д. и форматирование, но не включает изображения. Пример записи в блоге здесь: photonopticum.com/photography_matters/photography_matters.html Два больших оставшихся вопроса: а) как это сделать без клика (загружаться автоматически) и б) как загрузить изображение - person Wanni; 14.05.2011
comment
б) Вы должны изменить атрибут href любого изображения внутри контейнера .result-container (он должен содержать полный абсолютный путь к изображению): $('.result-container img').attr("href", "http://site.address.com/" + $('.result-container img').attr("href"));. - person Daniel O'Hara; 14.05.2011
comment
Еще раз большое спасибо! :) работает как надо :) Со всеми проблемами, о которых дебил мне не подумал: а) загружает контейнер div СО ВСЕМИ ЕГО СВОЙСТВАМИ как надо. б) все свойства из загруженного контейнера включают ссылки и источники img. К сожалению, они ссылаются на ИСХОДНЫЙ ПУТЬ с исходной страницы (например, /files/blog-entries.html и /files/blog-image.jpg). Вот почему он не загружает изображения: на отображаемой индексной странице (где вызывается подпрограмма) нет пути /files/blog-image.jpg. ПРОДОЛЖЕНИЕ - person Wanni; 15.05.2011
comment
ПРОДОЛЖЕНИЕ: Путь оттуда ДОЛЖЕН быть: ../blog/files/etc. . Хмпф. Итак, я думаю, вы дали мне решение, и я @#$%@ не продумал его.... Если я не могу автоматически менять пути волшебным образом, этот подход не сработает для меня.... Я должен иметь думаю, как еще я могу сделать эту работу. И - я не могу быть первым, кто захочет это сделать. Еще раз, спасибо за вашу помощь здесь !!!! Это было блестяще. - person Wanni; 15.05.2011

arrow_upward
0
arrow_downward

Я предполагаю, что вы используете скрытый iframe?

Например, это будет высота стиля. В стиле есть и другие вещи.

    this.container.getElementsByTagName("YOUuniqueID")[0].style.(STYLE)

Но вы должны поместить уникальный идентификатор в iframe

Попробуйте использовать встроенные отладчики в IE или Chrome, чтобы найти то, что вы хотите...

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

Еще один междоменный размер iframe, вопросы и ответы

person Piotr Kula    schedule 14.05.2011