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

Question

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

Answer 1

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("点击开关");
        })
    }
}