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

    Comparison of Models for Predicting the Outcome of Craniocerebral Injury by Using Machine Learning   ...

  2. 使用Bash Bunny从被锁定的系统抓取登陆凭据

    在今年早些时候,FB就对Bash Bunny做了相关的报导.这款号称“世界上最先进的USB攻击工具”的Bash Bunny,是否真的像其所说的一样是款渗透神器呢?下面,我将通过实例演示如何利用Bash ...

  3. 解决ps不能直接把文件拖进去的问题

    在运行里输入regedit,然后确定,在里面按照HKEY_LOCAL_MACHINE > SOFTWARE > Microsoft > Windows > CurrentVer ...

  4. Arm11-mini6410入坑

    Mini6410 学习Stm32的时候原子哥的资料真全啊,而且原子哥在他论坛也解答问题.然而现在学习ARM买了一套友善之臂的开发板,官方的资料只能刚好入门而已,其实入门都算不上.看了一下,网上的资料很 ...

  5. leetcode 买卖股票问题

    leetcode121 Best Time to Buy and Sell Stock 说白了找到最大的两组数之差即可 class Solution { public: int maxProfit(v ...

  6. 《Machine Learning Yearing》读书笔记

    ——深度学习的建模.调参思路整合. 写在前面 最近偶尔从师兄那里获取到了吴恩达教授的新书<Machine Learning Yearing>(手稿),该书主要分享了神经网络建模.训练.调节 ...

  7. oracle 数据库中某个字段逗号分隔,得到对应列中的个数(列转行)实现方法

    由于各种原因,数据的原则问题,导致某个字段上出现多个数据(依据分隔符隔开),比如 name 字段为 张三;李四;王五等等 需求:求一张表中name字段中出现的个数: 想要得到的结果为: 对应的sql语 ...

  8. Python第十课学习

    Python第十课学习 www.cnblogs.com/yuanchenqi/articles/5828233.html 函数: 1 减少代码的重复 2 更易扩展,弹性更强:便于日后文件功能的修改 3 ...

  9. Tecplot: Legend和图像中 Dashed/Dash dot/Long dash 等虚线显示没有区别的问题

    问题描述:如下图1中线型明明选择的不同,但是tecplot里显示的图像和legend里显示的线型没有区别,应该是bug. tecplot 版本:360EX  2017R2 解决办法:把Pattern ...

  10. 【linux基础】ubuntu系统NVIDIA驱动安装

    在安装GPU环境下的软件工具,特别是CUDA/CUDNN等,一定要先把GPU环境搭建好. NVIDIA驱动安装会遇到各种问题,真希望黄教主可以将各个工具如何安装使用讲解的更加细致.清楚一些,有时候按照 ...