碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 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. springboot+ibatis 多数据源配置

    这个是boot基本版本包,因为我用的打包方式是war所以去除掉了boot内置的tomcat,但是为了方便测试又引入了内置tomcat,只要添加<scope>provided</sco ...

  2. docker查看挂载目录Volume

    使用docker inspect命令查看container的volume信息,按照书本上面敲,发现一直报错: 使用命令如下: sudo docker inspect --format "{{ ...

  3. TowSum

  4. Charles Map Local 中文显示乱码问题

    最近在迁移客户端的业务,用React Native实现,在用本地数据测试Android的时候,遇到到中文乱码的问题.是因为编码问题. 一.首先看看文件编码是否是UTF-8,我的电脑是安装了Sublim ...

  5. AC, FVOCI, FVPL

    IFRS9 会计新准则中规定了资产划分依据为合同现金流特征及业务模式. 关键词:资产负债表,利润表,损益,利率风险 AC账户: 为收取合同约定的现金流.持有到期业务. 资产在持有期内不变,使用摊余成本 ...

  6. 【EMV L2】GPO响应以及AIP、AFL

    [GPO命令] 终端通过GPO(Get Processing Options)命令 通知卡片交易开始.命令数据为PDOL指定的终端数据. [GPO响应] 卡片在GPO命令的响应中返回AIP和AFL:A ...

  7. hexdump

    一个十六进制格式化输出: #include <stdio.h> #include <stdlib.h> #include <string.h> void hexdu ...

  8. Spring @EventListener 异步中使用condition的问题

    @EventListener是spring在4.2+推出的更好的使用spring事件架构的方式,并且异步方式也很好设定 但是在spring4.2.7版本上使用eventlistener的conditi ...

  9. 三、后门的编写和 ShellCode 的提取

    第三章.后门的编写和 ShellCode 的提取 (一)IP 和 Socket 编程初步 NOTES: 1.Windows 下网络通信编程的几种方式 第一种是基于 NetBIOS 的网络编程,这种方法 ...

  10. C语言中的一维数组

    一.一维数组的定义和引用 (1)一维数组的定义 类型说明符表示数组中的元素类型 数组标识符该数组型变量的名称,命名规则与变量名一致 常量表达式定义了数组中存放的数据元素的个数. (2)一维数组的引用 ...