碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 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. ssh外网穿透

    不同局域网ubuntu如何进行ssh穿透登录不同局域网ubuntu如何进行ssh穿透登录前言一. 建议安装teamview二. openssh服务三. 打开路由器端口映射四.连接@(ubuntu) 前 ...

  2. javascript 使用数组+循环+条件实现数字转换为汉字的简单方法。

    这几天,博主碰到了几道关于数字转汉字的javascript算法题,在网上找了很多的答案,发现都有点复杂,于是我决定自己写一篇关于这种算法题的简单解法,以下是博主自己的见解,有不足的地方请多指教. 接下 ...

  3. 搞Java

    上班之余,开始研究Java了. 想想从三月份开始自己啃书以来,Spring+Mybatis+公司框架的用法,基本都是速成来的,还是有些恐惧的. Spring万般爽,annotion用的很舒服,但还是想 ...

  4. easyui获取选中行上一行的数据

    text: 'XX',            iconCls: 'icon-ok',            handler: function () {                var rowI ...

  5. ReentrantLock+线程池+同步+线程锁

    1.并发编程三要素? 1)原子性 原子性指的是一个或者多个操作,要么全部执行并且在执行的过程中不被其他操作打断,要么就全部都不执行. 2)可见性 可见性指多个线程操作一个共享变量时,其中一个线程对变量 ...

  6. Lua实现Map

    通过Lua中自带的table来实现一个Map,可以根据键值来插入移除取值 map = {} local this = map function this:new() o = {} setmetatab ...

  7. MySQL中MyISAM与InnoDB的主要区别对比

    特征 MyISAM InnoDB 聚集索引 否 是 压缩数据 是(仅当使用压缩行格式时才支持压缩MyISAM表.使用压缩行格式和MyISAM的表是只读的.) 是 数据缓存 否 是 加密数据 是(通过加 ...

  8. CSS学习笔记_day1

    目录 一. 什么是HTML 二.编辑器 三.Html的基本骨架 四.html基本标签 h.p.img.a.audio.video.ul>li.ol>li.dl dd dt.span.div ...

  9. 脚手架方式搭建vue项目

    一.首先基于node环境,我想应该每一个前端开发者都应该懂的吧,这里安装运行什么的就不多说了. 搭建成功之后在文件夹的任何(如果是全局的话)一个位置都能按住shift键同时鼠标右键在工具框中就会出来一 ...

  10. SQL中Union和Union All

    工作中,看到大佬写的一段SQL,查询了五个表中的数据,最后求某个收入的总和,其中使用了Union All,因此在这里记录一下我从中学到的东西 先上语法 Union:   [ Select语句1 ] U ...