如何禁用来自另一个站点的小部件上的链接？

Posted 2023-05-07

【中文标题】如何禁用来自另一个站点的小部件上的链接？

【英文标题】：How to disable a link on a widget from another site?

【发布时间】：2017-05-07 03:01:22

【问题描述】：

如何禁用与我添加到我的网站的小部件相关联的链接？除了他们提供的 html 代码之外，我无权访问任何内容。一个示例是链接中页面底部的 Trustpilot 小部件。如果您单击小部件，它会将您带到 Trustpilot 的网站，但我们不希望这种情况发生。 https://goldsilver.com/

【问题讨论】：

如果该小部件是免费的，那么我敢打赌你不能这样做，因为它违反了许可规则。

【参考方案1】：

小部件是 iframe，当 iframe 是跨域的（因此 iframe 源文件不在您的网站上）时，您无法更改其中的任何内容。 您可以在其上放置一个覆盖 div，但这会阻止对 iframe 的每次点击。

顺便说一句，您不能对供应商提供的小部件执行此操作，因为这违反了他们的政策 ~ Saumya Rastogi

仅用于学习目的：

#widget 
  width: 450px;
  height: 350px;
  border: 1px solid black;
  position: relative;

#widget > iframe 
  border: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;

#widget:after 
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2000;

<div id="widget">
  <iframe src="https://widget.trustpilot.com/trustboxes/539ad0ffdec7e10e686debd7/index.html?locale=en-US&templateId=539ad0ffdec7e10e686debd7&businessunitId=4bf1926500006400050c99f2&styleHeight=350px&styleWidth=100%25&theme=light&stars=4%2C5"></iframe>
</div>

【参考方案2】：

您可以将此 css 属性赋予该特定标签，如下所示：

a  pointer-events: none; 

a.disabled_link 
  pointer-events: none;

<a class="disabled_link">Any Link</a>

顺便说一句，您不能对供应商提供的小部件执行此操作，因为这违反了他们的政策。