碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 https://segmentfault.com/q/1010000009001758

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

  注意有些朋友直接使用 contentDocument 方法获取iframe 的svg 元素,返回了null,很大的可能性是因为iframe 还没加载完成 让他onload 后操作

使用iframe方式获得svg中的DOM元素,和svg 的 contentDocument 返回 null的更多相关文章

  1. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  2. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  3. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  4. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  5. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  6. 使用SVG中的Symbol元素制作Icon【摘转】

    以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势 随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...

  7. angular在组件中选择dom元素

    想选择 在组件中选择自己template里的dom元素,要使用ElementRef.     import { Component, EventEmitter, HostListener, OnIni ...

  8. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  9. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

随机推荐

  1. 【Linux】【Kernel】一个简单的内核模块例子

    1.本地主机的参数 zhangjun@zhangjun-virtual-machine:~$ uname -a Linux zhangjun-virtual-machine 4.4.0-31-gene ...

  2. 使用lua读文件并输出到stdin

    io.input("c:\\AudioCom.log") t= io.read("*all") io.write(t) 三行代码搞定,简洁的不像话 io.rea ...

  3. openSUSE XFCE桌面 多媒体解码器安装

    openSUSE15 leap 在终端命令行安装编解码器: 添加必要的软件源 zypper addrepo -f http://packman.inode.at/suse/openSUSE_Leap_ ...

  4. 机器学习基础环境的安装与使用(MAC版)

    使用到Matplotlib.Numpy.Pandans等库 1.创建虚拟环境 >>>> sudo pip3 install virtualenv >>>> ...

  5. Delphi7连接MySql数据库-DBGrid控件显示数据

    一个简单的Delphi7小程序,使用MySql数据库做简单查询,用DBGrid控件显示结果,实现过程如下: (1)在MySql中新建demouser表,插入记录用于测试. (2)在Delphi7中新建 ...

  6. 利用axure软件实现app中的轮播图功能

    1.首先在axure软件中插入一张手机模型图片并调整为合适大小 2.在需要展示轮播图片位置拖入[动态面板]并且调整大小 拖入后双击动态面板,填入面板名称,并且添加面板状态(此处轮播图为三张,所以有三个 ...

  7. java语言基础--接口

    接口定义: 是一个特殊的抽象类,在接口里面的所有方法都是抽象的. 接口用interface来声明. 注意: 接口中只能出现常量和抽象方法: 接口里面没有构造方法,无法创建接口的对象: 接口和接口之间支 ...

  8. 新式类单例模式之 __new__()

    单例模式: 确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 类中有一个静态属性__instance,默认为none,重构__new__()方法,判断__instance是否为空,若为 ...

  9. SQLI DUMB SERIES-13

    (1)检测闭合方式 通过 ') 闭合. (2)尝试输入 admin')# 无回显.尝试报错注入, 爆表payload: admin') and extractvalue(1,concat(0x7e,( ...

  10. Qt 学习-----helloword

    (参考:http://www.qter.org/portal.php?mod=view&aid=27&page=3) 1. 打开“文件→新建文件或项目”菜单项(也可以直接按下Ctrl+ ...