碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 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. maven 常用备忘录

    1.maven 国内的常用中央仓库地址配置: <mirror> <id>alimaven</id> <name>aliyun maven</nam ...

  2. C++实验:时间和日期类

    描述 用C++实现日期类CDate和时间类CTime,并在次基础上利用多继承实现日期时间类CDateTime,使其能输出样例信息. 主函数里的代码已经给出,请补充完整,提交时请勿包含已经给出的代码. ...

  3. 使用SQLsever批量查询TXT文本中的值

    测试文档如下,需要查到case_no值为以下时,对应的单据信息分别是什么. 步骤如下: 在txt文本中 Ctrl+H,输入如下,点击“全部替换” 在word文本中,复制以上信息到word文本中,目的是 ...

  4. 我在MySQL免安装版使用过程中遇到的问题记录【二】

    跟上次问题不一样!这次是重新安装MySQL免安装版,各种文件搞对了还是错了也不清楚. 现在是:下载完安装包之后,按照现在的下方的代码,创建一个my-default.ini文件并放入下代码: [mysq ...

  5. SharePoint 2013 解惑 无法打开文件浏览器

    你有时候会看到这东西谈出来,当你想像管理文件一样,管理SharePoint上资源的时候 意思是说,不能打开文件浏览器,请加入你的站点到信任站点,这个有两个问题,一个是IE设置,一个是WebClient ...

  6. easyui-tree-url-param

    远古写法 url后面加参数?param1=1&param2=2 动态添加 onBeforeLoad: function (node, param) { param.param1= 1, par ...

  7. pyCharm django 中新加app

    1.在manage.py@djangotest中输入命令: 1.startapp   realnameauth   ---新建一个app,名字为realnameauth 2.在 django 项目中的 ...

  8. I/O 模型与 Java

    本文主要记录 Java 中 I/O 模型及相关知识点 .另,由于自身知识水平有限,如有不正之处,望各位能够谅解,欢迎批评指正! 一.I/O 基础 由于 Java 中 I/O 相关的 API ,无论是 ...

  9. latex如何定义宏,插图统一尺寸减少工作量

    问题背景是这样的,因为我要在文中插入一系列的图片,但是这些图片的大小我要保持一致,来达到预期的效果. 比如我有三个figure,这三个figure中,每个figure里面有两行,5列图片,我想要的是, ...

  10. JavaScript 浏览器中的事件

    1.事件的基本概念 事件是指在文档或者浏览器中发生的一些特定交互瞬间,比如打开某一个网页,浏览器加载完成后会触发 load 事件,当鼠标悬浮于某一个元素上时会触发 hover 事件,当鼠标点击某一个元 ...