碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 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. centos 7 安装

    一直很喜欢centos,5.6.7三个大版本都有用过. 这次重新在笔记本上安装centos 7. 先是下载了最新的unetbootin,用它来制作了U盘安装.unetbootin很好用,可以自动下载然 ...

  2. openstack之neutron配额调整

        1. 前言   neutron在安装配置完成之后,openstack为了实现对所有tenant对网络资源的使用,针对neutron设置有专门的配额,以防止租户使用过多的资源,而对其他的tena ...

  3. 怎样检测TCP/UDP端口的连通性

    1 TCP端口的连通性 TC端口的连通性,一般通过telnet检测: TCP协议是面向连接的,可以直接通过telnet命令连接 telnet host-ip port 2 UDP端口的连通性 因为公司 ...

  4. Springboot 定时任务,service层无法注入问题详细解决

    开发一个微信小程序后台,建立websocket 长连接,需要后台开启定时任务, 定时任务定时查库,相应前台 但是具体执行过程中一直在报空指针错误,最后定位到service 为空,无法调用其相关的方法导 ...

  5. javascript中的Date对象

    Date是什么? Date是日期类的构造函数 也是个对象,用于构造日期对象的实例. 有一个 now()方法,返回截止目前的时间戳(1970.1.1日始). Date.parse()接受 一定格式的日期 ...

  6. python中用psutil模块,yagmail模块监控CPU、硬盘、内存使用,阈值后发送邮件

    import yagmailimport psutildef sendmail(subject,contents): #连接邮箱服务器 yag = yagmail.SMTP(user='邮箱名称@16 ...

  7. python 2.7和3.7都支持的情况 bit_length() pycharm 更改解释器

    1.头部加: #!/usr/bin/env python # -*- coding:utf-8 -*-    2.bit_length() :当前数值为二进制时,至少要用多少为表示 a = 5 b = ...

  8. python标准库之random模块

    Python中的random模块用于生成随机数. 下面具体介绍random模块的功能: 1.random.random() #用于生成一个0到1的 随机浮点数:0<= n < 1.0 1 ...

  9. 2018上C语言程序设计(高级)作业- 第3次作业成绩

    作业地址 https://edu.cnblogs.com/campus/hljkj/CS2017-01/homework/1779 评分准则 第一次作业各项成绩包括三项: 完成PTA所有题目:13分 ...

  10. 信号报告-java

    无线电台的RS制信号报告是由三两个部分组成的: R(Readability) 信号可辨度即清晰度. S(Strength) 信号强度即大小. 其中R位于报告第一位,共分5级,用1-5数字表示. 1-- ...