我用过
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button type="button" id="button">Click</button>
<pre id="output">Not Loading...</pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
<script type="text/babel">
document.addEventListener('DOMContentLoaded', function () {
const button = document.getElementById('button');
const output = document.getElementById('output');
output.textContent = 'Loading...';
addEventListener('click', function () {
output.textContent = 'Done';
});
});
</script>
</body>
</html>
但似乎里面的代码document.addEventListener('DOMContentLoaded', function () {});没有加载.
如果我从我的代码中删除它,它突然工作.
我开始使用SVG，并且具有以下代码：
的HTML
<embed id="embed" src="svg.svg" type="image/svg+xml" width="400" height="300" >
<object id="object" data="svg.svg" type="image/svg+xml" width="400" height="300"></object>
Java脚本
$(window).load(function (){
//alert("Document loaded, including graphics and embedded documents (like SVG)");
var svgDoc_embed = document.getElementById("embed").getSVGDocument();
alert("My svgDoc_embed => " + svgDoc_embed);
var svgDoc_object = document.getElementById("object").getSVGDocument();
alert("My svgDoc_object => " + svgDoc_object);
});
在FireFox浏览器中运行良好
My svgDoc_embed => [object SVGDocument]
My svgDoc_object => [object SVGDocument]
但不适用于Chrome浏览器。
My svgDoc_embed => null
My svgDoc_object => null
我已经搜索了Internet，但是找不到任何有效的方法
欢迎任何建议
================================================== ========================
我尝试打开Chrome JS控制台并输入：
document.getElementById ("object"). GetSVGDocument ();
结果为空。
还将代码更改为： …
我是以编程方式向<embed>我的HTML文档添加标记:
var e = document.createElement('embed');
e.src = "some-image.svg";
e.type = "image/svg+xml";
document.body.appendChild(e);
这工作正常,SVG元素按预期显示.但是,我想用JavaScript操作SVG元素,并且在将元素添加到DOM后立即尝试这样做失败,因为内容尚未加载.
我怎样才能做到这一点.请注意,我想在没有jQuery的情况下这样做,所以请不要指向jQuery API.
我的html中有这个（SVG约为500K）：
<object type="image/svg+xml" data="/assets/images/test-diagram.svg" width="100%" height="100%" id="arm" class="svg-content"></object>
我正在GitHub上使用脚本为SVG创建视口，以便可以在视口内平移和缩放，但与GoogleMaps一样。
https://github.com/ariutta/svg-pan-zoom
因此，加载顺序必须为：
需要运行以下代码：
var panZoomArm = svgPanZoom('#arm');
不幸的是，以上代码在SVG未完全加载时运行，从而导致错误。
我已经尝试过了，但是.load似乎不是为它而设计的<object>-实际上debugger从未触发过
$('#arm').load(function(){
debugger
var panZoomArm = svgPanZoom('#arm');
});
这些方法让我告诉代码仅在完全下载500k svg之后才能运行吗？
对于我而言，可靠地触发此代码的唯一方法是使SVG完全内联...因此，这就像几百行代码一样，无法缓存。
编辑 - -
好的，我可以使用它，但是我很困惑。
这不起作用（调试器从不触发）：
$('#arm').load(function(){
debugger
var panZoomArm = svgPanZoom('#arm');
});
这有效：
var arm = document.getElementById("arm");
arm.addEventListener('load', function(){
debugger
var panZoomArm = svgPanZoom('#arm');
});
我是JavaScript的新手,我在更改html文档上的图像方面遇到了问题.我知道为了更改图像,我需要更改img的src属性.
我有一个名为"magenta.jpg"的图像,我想在页面加载时用"fuschia.jpg"替换它.
我的HTML
<img src="magenta.jpg" name="photo" id="photo">
我的JavaScript
document.getElementById("photo").src = "fuschia.jpg";
当我尝试这样做时,我收到一条错误消息:
未捕获的TypeError:无法设置null的属性'src'
你能帮我理解代码出了什么问题,以及如何修复它？