在非當前HTML文檔上使用getElementById（）

本質上，我想從我的服務器上的文檔中將div標籤內的文本放到當前文檔中。解釋原因：我想從一篇「新聞文章」中拉出標題，將其用作鏈接到該文章的文本。在非當前HTML文檔上使用getElementById（）

例如，目標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風格問題（請參閱下面的註釋）。

來源

2011-08-16 hannebaumsaway

有關使用JSON從服務器獲取標題的問題？ – QuentinUK

用一個小小的擴展問題來更新這個問題：Firefox似乎不僅僅拉入我想要的文本，而且還從它的源文件中提取樣式（font-size，font-family等）！這在Chrome或IE中不會發生。思考？ – hannebaumsaway

上述評論中的子問題已解決[此處]（http://stackoverflow.com/questions/10726202/stripping-html-from-jquery-load-result）。 – hannebaumsaway

通常情況下，我會嘗試僅使用用戶指定的工具解決問題;但如果你使用的是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')); 
    }); 
});

的選擇確保只有與屬性「linked_div」存在的鏈接將被處理。

來源

2011-08-16 02:54:11 rkw

對不起，我添加了jQuery標籤，因爲我已經有jQuery代碼。所以你上面的代碼是有道理的，除了load（）屬性傳遞給....在我的例子中，這將等同於'a.load（'index.php？link = to_page news-header'）'，這是否正確？ – hannebaumsaway

更新：在load（）API上閱讀，我發現這正是你的代碼所做的......從指定的路徑拖到遠程HTML文檔以及傳入的#id attr。我將拋出此代碼並讓你知道結果！ – hannebaumsaway

好的，所以我的錨標記的innerHTML沒有用上面的代碼更新。我檢查了運行時代碼，並且遠程文件的href路徑是正確的，並且向錨標記添加了attr'linked_div ='＃news-header''。但是在運行時innerHTML仍然是空白的。我在'$（document）.ready（function（）...'jQuery block中調用了上面的函數。想想嗎？ – hannebaumsaway

正如QuentinUK提到的那樣，您需要將遠程文檔的內容拖入當前DOM。我建議像jQuery的.load()方法

來源

2011-08-16 02:10:36 ScottD

謝謝你們。實際上，我的頁面上已經有了jQuery代碼，所以如果這是一條路，我會研究這條路線。所以我假設我可以使用jQuery的load（）方法加載我的遠程HTML文件作爲對象在JavaScript中？那時我可以使用getElementById（），還是有jQuery中的等價物來拉我需要的文本？ – hannebaumsaway

@ kougar24：是的，如果你有它，jQuery就是要走的路，除非你真的喜歡打字，否則在純JavaScript中爭吵不是那麼有趣。 –

謝謝。是的，jQuery肯定是要走的路。 – hannebaumsaway

我不知道你在哪裏得到你的HTML，但假設你已經有一個字符串，你可以create a document of your own，填入你的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很多。

來源

2011-08-16 02:37:56

在非當前HTML文檔上使用getElementById（）

回答

相關問題