使用iframe方式引入的外部svg不能用js获取svg中的DOM元素(跨域时)

使用iframe方式引入的外部svg不能用js获取svg中的DOM元素,是在跨域的情况下,不跨域时可以使用js正常获取svg里面的子元素

慕哥6287543
浏览 1145回答 2
2回答

哇哈哈龍

请问您解决了吗,我也遇到了这个问题,跨域的时候获取不到,网上啥资料也没有查到

斯蒂芬大帝

iframe中文档对象只有在加载完成后才能够被获取,否则会返回null,你可以尝试以下方法:/*注意:采用iframe获取svgDom时,必须等到iframe加载完成后,在调用document.getElementById('iframe').contentDocument获取svgDom,否则会获取不到svgDom。*/var iframe = document.getElementById('svgframe');//获取id为svgframe的iframe对象 if (iframe.attachEvent) {    iframe.attachEvent('onload', function () {        alert('iframe is loaded')    })} else {    iframe.onload = function () {        //这里获取svgDom        var iframeSvg = document.getElementById('svgframe').contentDocument;        //接下来就可以对svgDom进行操作,绑定元素点击事件,改变元素的属性等等        //给svg上id为‘VKnife1’的元素绑定点击事件        iframeSvg.getElementById('VKnife1').addEventListener('click', function () {            //点击事件操作            alert("点击开关");        })    }}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript