Question

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

到目前为止，我可以将html放入名为“ asd”的div中，并且该jquery似乎可以使用html页面外部的img标签，但是选择器不会在div内选择img标签。 asd”本身。

我尝试使用iframe，但是我读到某处jquery在iframe中不起作用的原因是，即使选择一个具有ID标签的iframe也无法使用。如果可以通过iframe使用它，请告诉我。

到目前为止，我已经尝试了$（“ object img”），$（“ body img”）和$（“ img”）的运气。 google搜索只是“电动汽车”图像。

我的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

这是crossorigin.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>

如何在不是您的HTML页面上使用jquery选择img

1 个答案: