如何在不属于您的 HTML 页面上使用 jQuery 选择 IMG

Question

我试图在div中显示一个html页面，然后分别选择该页面中的所有img标记，并让它们在图像上显示一个覆盖div。

到目前为止，我可以将html放在一个名为"asd"的div中，jquery似乎可以处理html页面外部的img标记，但选择器没有选择div"asd(本身内部的img标记。

我试过使用iframe，但我在某些地方读到jquery在iframe中不起作用，因为即使iframe有ID标记，也无法选择它。如果它可以使用iframe，请告诉我。

到目前为止，我已经尝试了$("object img"(、$("body img"(和$("img"(，但没有成功。谷歌搜索的只是"电动汽车"的图片。

我的jquery选择器将img标记包装在div中，然后在div中插入一个具有绝对位置的按钮，这样按钮就会出现在每个img的右上角。

代码：

<div id="asd">
</div>
<button class="buttons_move_shift_min_max_close" onclick="selector()" style="position:fixed;top:0px;right:0px;z-index:100;">button</button>
<script>
$("#asd").html('<object data="https://www.google.co.nz/search?q=electric+cars&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjMqcHZvcPeAhXHtI8KHUkZDRsQ_AUIDigB&biw=1920&bih=897" style="width:100%;height:100%;"/>');
function selector()
{
$("img").each
(
function()
{
$(this).wrap("<div id="wrapp" class="wrapp" style="margin:0;padding:0;"></div>");    
}
);
$(".wrapp").append("<button class="hybrid" style="z-index:100;position:absolute;"></button>");
}
</script>

我还尝试过等待页面完全加载img标记，但没有成功。如果这可以通过简单的javascript实现，请告诉我。

我知道尝试在不是你的html上运行jquery是很棘手的，可能看起来是一个愚蠢的想法，但必须有一种方法，而不必创建一个自定义的chrome插件应用程序。

Answer 1

跨源代理服务器

它的要点是，你有一个网页，要求服务器提供一些数据。该服务器向另一个服务器请求数据，并将结果传回网页。

这里有一个示例服务器：cors-anywhere

以下是crossorgin.me 的简洁解释

CORS代理是一种服务，允许开发人员(可能是您(访问其他网站的资源，而无需拥有该网站。

这些服务器附带了一些注意事项，最终，您需要创建自己的服务器。

function go() {
fetch('https://cors-anywhere.herokuapp.com/https://www.google.co.nz/search?q=electric+cars')
.then(res => {
return res.text();
})
.then(data => {
document.querySelector('#output').innerHTML = data;
}).catch(err => {
document.querySelector('#output').innerHTML = err.message;
});
}

<button onclick="go()">Go</button>
<div id="output"></div>