javascript jquery-获取不同的页面元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7567181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery- get different page elements
提问by S Singh
I want to get element attribute value which belongs to other html page.
我想获取属于其他 html 页面的元素属性值。
For example if I am in file a.htmland want to get data like element attribute value from b.htmlin a.html
例如，如果我在文件a.html，并希望从中获取类似元素的属性值数据b.html在a.html
All I am trying to do in jquery.
我正在尝试在 jquery 中做的所有事情。
Please suggest!
请建议！
I read posts but I want like below-
我阅读了帖子，但我想要以下内容-
something like->
[Code of a.html]
类似的东西->
[a.html 的代码]
var result = get(b.html).getTag(img).getAttribute(src)//not getting exactly
$("#id").append(result)
any idea how can i achieve this?
知道我怎么能做到这一点吗？
回答by Rafay
first you will have to fetch the b.htmland then you can find the attribute value e.g.
首先，您必须获取b.html，然后才能找到属性值，例如
//if you dont want to display the data make the div hidden
^
$("#someDivID").load("b.html",function(data){
var value=$(data).find("#elementID").attr("attributeName");
});
回答by yan.kun
With jQuery you can load only parts of remote pages. Basic syntax:
使用 jQuery，您只能加载远程页面的一部分。基本语法：
$('#result').load('ajax/test.html #container');
The second part of the string is a basic jQuery selector. See the jQuery documentation.
字符串的第二部分是一个基本的 jQuery 选择器。请参阅jQuery 文档。
回答by Kai
By default, selectors perform their searches within the DOM starting at the document root.
If you want to pass alternate context, you can pass to the optional second parameter to the $() function. For eg,
默认情况下，选择器在 DOM 中从文档根开始执行它们的搜索。
如果要传递备用上下文，可以将可选的第二个参数传递给 $() 函数。例如，
$('#name', window.parent.frames[0].document).attr();
$('#name', window.parent.frames[0].document).attr();
回答by CertainPerformance
Keep in mind that you can usually only make direct connections (like with $(..).load() to pages on the same domain you're currently on, or to domains that do not have CORS restrictions. (The vast majority of sites have CORS restrictions). If you want to load the content from a cross-domain page that has CORS restrictions, you'll have to make make the request through yourserver, and have your server make the request to the other site, then respond to your front-end script with the response.
请记住，您通常只能与$(..).load(当前所在域中的页面或没有 CORS 限制的域建立直接连接（如使用）。（绝大多数站点都有 CORS 限制）。如果您想从具有 CORS 限制的跨域页面加载内容，您必须通过您的服务器发出请求，并让您的服务器向其他站点发出请求，然后响应您的前端带有响应的脚本。
As for this question, if you want to achieve this result withoutjQuery, you can use DOMParser on the response text instead, to transform it into a document, and then you can use DOM methods on that document to retrieve the element, parse it as desired, and insert it (or data retrieved from it) onto the current page. For example:
对于这个问题，如果你想在没有jQuery 的情况下实现这个结果，你可以在响应文本上使用 DOMParser，将其转换为文档，然后你可以在该文档上使用 DOM 方法来检索元素，将其解析为所需，并将其（或从中检索的数据）插入当前页面。例如：
fetch('b.html') // replace with the URL of the external page
.then(res => res.text())
.then((responseText) => {
const doc = new DOMParser().parseFromString(responseText, 'text/html');
const targetElementOnOtherPage = doc.querySelector('img');
const src = targetElementOnOtherPage.src;
document.querySelector('#id').insertAdjacentHTML('beforeend', `<img src="${src}">`);
})
.catch((err) => {
// There was an error, handle it here
});
