在非当前 HTML 文档上使用 getElementById()

发布于 2024-11-29 21:30:14 字数 429 浏览 3 评论 0原文

本质上，我想从服务器上的文档中提取 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 风格问题（请参阅下面的评论）。

原文

Essentially, I want to pull text within a div tag from a document on my server to place it in the current document. To explain the reason: I want to pull a headline from a "news article" to use it as the text for a link to that article.

For example, within the target HTML is the tag:

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

So in my current document I want to use javascript to set the text within my anchor tags to that headline, i.e.:

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

I'm having trouble figuring out how to access the non-current document in JS.

Thanks in advance for your help.

ADDED: Firefox style issue (see comment below).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜还是长夜 2024-12-06 21:30:14

我不确定你从哪里获得 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/ambigously/ZZq2z/1/

I'm not sure where you're getting your HTML but, assuming you already have it in a string, you could create a document of your own, stuff your HTML into it, and then use the standard getElementById to pull out the piece you want. For example:

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.

Live version: http://jsfiddle.net/ambiguous/ZZq2z/1/

回复收藏 0 原文

清欢 2024-12-06 21:30:14

通常，我会尝试仅使用用户指定的工具来解决问题；但如果您使用的是 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”的链接。

Normally, I would try to solve an issue only with the tools specified by the user; but if you are using javascript, there really is no good reason not to just use 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'));
});

That little function up there can help you update all your link's text dynamically. If you have more than one, you can just put it in a $('a').each() loop and call it a day.

update to support multiple links on condition:

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

The selector makes sure that only the links with the existence of the attribute 'linked_div' will be processed.

回复收藏 0 原文