Используйте getElementById () для не текущего HTML-документа - PullRequest
Новая
       20

Используйте getElementById () для не текущего HTML-документа

1 голос
/ 16 августа 2011

По сути, я хочу извлечь текст из тега div из документа на моем сервере, чтобы поместить его в текущий документ.Чтобы объяснить причину: я хочу извлечь заголовок из «новостной статьи», чтобы использовать его в качестве текста для ссылки на эту статью.

Например, в целевом HTML есть тег: 

<div id='news-header'>Big Day in Wonderland</div>

Так что в моем текущем документе я хочу использовать javascript, чтобы установить текст в моих тегах привязки к этому заголовку, то есть: 

<a href='index.php?link=to_page'>Big Day in Wonderland</a>

У меня проблемы с выяснением, как получить доступ кустаревший документ в JS.

Заранее благодарим за помощь.

ДОБАВЛЕНО: Проблема в стиле Firefox (см. комментарий ниже).

Ответы [ 3 ]

3 голосов
/ 16 августа 2011

Я не уверен, откуда вы берете свой HTML, но, предполагая, что он уже есть в строке, вы можете создать собственный документ , вставить в него свой HTML, а затем использоватьстандарт getElementById, чтобы вытащить кусок, который вы хотите.Например: 

var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
doc.documentElement.innerHTML = '<body><div>Nonsense</div><div id="news-header">Big Day in Wonderland</div><p>pancakes</p></body>';
var h = doc.getElementById('news-header');
// And now use `h` like any other DOM object.

Живая версия: http://jsfiddle.net/ambiguous/ZZq2z/1/

Конечно, с jQuery было бы намного проще.

1 голос
/ 16 августа 2011

Обычно я бы пытался решить проблему только с помощью инструментов, указанных пользователем; но если вы используете javascript, то на самом деле нет веской причины не использовать jQuery. 

<a id='mylink' href='url_of_new_article' linked_div='id_of_title'></a>

$(function() {
    var a = $('#mylink');
    a.load(a.attr('href') + ' #' + a.attr('linked_div'));
});

Эта маленькая функция может помочь вам динамически обновлять весь текст вашей ссылки. Если у вас есть более одного, вы можете просто поместить его в цикл $('a').each() и назвать его днем.

обновление для поддержки нескольких ссылок при условии: 

$(function() {
    $('a[linked_div]').each(function() {
        var a = $(this);
        a.load(a.attr('href') + ' #' + a.attr('linked_div'));
     });
});

Селектор гарантирует, что будут обрабатываться только ссылки с существованием атрибута «connected_div».

1 голос
/ 16 августа 2011

Вам нужно вытащить содержимое удаленного документа в текущий DOM, как упоминал QuentinUK. Я бы порекомендовал что-то вроде jQuery .load () метод

...