时间戳

首页 > 解决方案 > 'onclick' 不适用于具有 svg 图像的对象元素

javascript - 'onclick' 不适用于具有 svg 图像的对象元素

问题描述

当我在 html 文档onclick中使用 -element 的属性时object，它不会响应点击。

在我的文档中，我有一个 svg 图像并将其存储在一个 -object元素中，因为图像中有一些动画会因仅使用 -标记而丢失img。

在下面的简化示例中，这onmouseover两个对象都有效，但onclick仅适用于object没有 svg-image 的对象。

document.getElementById('test1').onmouseover = hover;
document.getElementById('test1').onclick = click;
document.getElementById('test2').onmouseover = hover;
document.getElementById('test2').onclick = click;

function hover() { alert('Hovered');};
function click() { alert('Clicked');};
<object id='test1' data="https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg" height="50px"></object>

<object id='test2' height="50px" border="1px solid black">some object</object>

我在这里做错了什么吗？或者有没有其他可行的方法？

为此（和相关问题）给出的答案建议pointer-events: none在 svg-image 上使用并将其包装在 div 中并将侦听器应用于该 div。但我需要 svg-image 来响应mouse events，因此无法设置pointier-events: none.

标签： javascripthtml

解决方案

经过一番研究，我发现您的主要问题是：

无法点击<object>标签。(*)

(*)除非<object>标签为空，否则它的行为将与<iframe>标签相同，受 CORS 策略的严格限制，浏览器将阻止任何修改源的尝试。

为什么？

CORS 安全策略是一种机制，它使用额外的HTTP标头告诉（或授予）浏览器使用和操作外部域内容的权限。

这是一个安全策略，因为想象一下：

有人有一个名为stackoverflow.co. 这个恶意的人决定通过 iframe 加载网站stackoverflow.com并操纵其内容以诱骗用户进入虚假登录页面，当用户输入他的私人凭据时，他并没有登录官方网站，因此他的凭据将被恶意网站窃取。

好吧，CORS 是这里的英雄。由于这个安全策略，远程服务器可以发送一个额外的标题，如下所示：并且浏览器确定如果这些内容中的任何内容是通过或标签Access-Control-Allow-Origin: *加载的，则应该阻止任何修改其内容的尝试。<iframe><object>

由于在 2019 年这已成为网络标准，因此大多数浏览器都会检测到此 CORS 标头并阻止此类攻击。

那你该怎么办？

好吧，如果您的问题是您需要加载 svg，最快的解决方案是通过<img>标签加载它。

否则，您将无法在包含 CORS 标头的<object>nor标记中注入、使用、处理或任何内容。<iframe>除了onload.

其他来源：

之前回答过类似问题的用户可以在这里找到。

推荐阅读