Mozilla Firefox不会在addEventListener('load')中加载SVG对象
Mozilla Firefox doesn't load SVG objects in addEventListener('load'
我不知道为什么,但它适用于Chrome和Safari,而不是Mozilla。我有object
html标签加载svg文件。文件中包含.s0
类。我想处理事件当你点击那个类
谁知道出了什么问题?对不起,当我试图粘贴代码时,jsfiddle没有显示object
。
<object data="jo.svg" type="image/svg+xml" id="obj"></object>
代码$(function() {
var a = document.getElementById('obj');
a.addEventListener("load", function() {
// !!!
console.log('this line is not reachable in Mozilla or reached before svg loaded');
var svgDoc = a.contentDocument;
var els = svgDoc.querySelectorAll(".s0");
for (var i = 0, length = els.length; i < length; i++) {
els[i].addEventListener("click", function() {
alert('clicked');
}, false);
}
});
});
首先你需要决定是否使用jquery,并且不要将jquery代码与原生javascript代码混合。
Javascript版本:<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<object data="http://gbip.ru/poselki/genplan/5/full/gp.svg" type="image/svg+xml" id="obj"></object>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
var obj = document.getElementById('obj');
obj.addEventListener('load', function(){
console.log('loaded');
});
});
</script>
</body>
</html>
Jquery版本<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<object data="http://gbip.ru/poselki/genplan/5/full/gp.svg" type="image/svg+xml" id="obj"></object>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $obj = $('#obj');
$obj.on('load', function () {
console.log('loaded');
})
});
</script>
</body>
</html>
Ubuntu 14.04.3 LTS, Firefox 40.0.3
我用:
$('#svg').load('"image/svg+xml"', function () {
alert('svg loaded');
});
适用于Chrome, Firefox和IE9+。
最好使用<svg>
标记,而不是<object>
。火狐在<embed>
下工作得更好。如果你能把svg代码放在标签里面,一切都很好。
你可以试试<embed>
标签:
我建议你使用<svg>
标签,因为你可以用一个简单的方式用CSS和Javascript控制里面的所有元素:
也许,Raphaël JS是一个很好的库。它允许用javascript控制所有SVG元素,并使许多任务不复杂:
http://raphaeljs.com/如果你可以使用Modernizr.js库就可以了,它可以帮助你检测是否有浏览器支持。
if (!Modernizr.svg) {
$(".logo img").attr("src", "images/logo.png");
}
包含modernizr: https://modernizr.com/
您可以阅读这篇有趣而完整的文章,了解如何在所有变体中使用svg:
https://css-tricks.com/using-svg/然而,你应该让@cetver在他的回答中建议你,不要混合jQuery和原生js代码。
有了所有的推荐,你可以用简单的方式实现内容的加载。好运。
相关文章:
- 在本地主机上捕捉不加载 svg
- 在 <对象> 标记中加载 SVG 时,将侦听器添加到 SVG 卸载事件
- Fabric js从url加载svg缺少属性
- 使用SNAP.SVG平稳加载SVG
- 加载 svg-pan-zoom.js 后居中
元素 - 使用未分组的构造 JS 加载 SVG
- 使用webpackurl加载程序加载svg会返回js文件
- Snap.如何同步加载SVG
- 为什么当我将函数添加到Snap.load(..正在加载SVG..我的方法..)中时,我不能调用Snap.Road()内部
- 在React中加载SVG的性能
- 如何设置属性来加载svg
- Mozilla Firefox不会在addEventListener('load')中加载SVG对象
- 通过JS函数加载SVG
- 在Iframe中加载SVG的Javascript事件
- 加载svg文件(xml)并使用javascript提取特定信息
- 优化加载SVG和图像的Kineticjs脚本
- 使用innerHTML加载svg
- 用web包加载svg资源
- 如何重新加载svg的内容
- 为什么不在chrome扩展中加载SVG ?