使用iframe方式获得svg中的DOM元素,和svg 的 contentDocument 返回 null
碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 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的更多相关文章
- [翻译svg教程]svg中的circle元素
svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...
- [翻译svg教程]svg 中的g元素
svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- 使用SVG中的Symbol元素制作Icon【摘转】
以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势 随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...
- angular在组件中选择dom元素
想选择 在组件中选择自己template里的dom元素,要使用ElementRef. import { Component, EventEmitter, HostListener, OnIni ...
- Vue中获取dom元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
- 在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...
随机推荐
- springboot+ibatis 多数据源配置
这个是boot基本版本包,因为我用的打包方式是war所以去除掉了boot内置的tomcat,但是为了方便测试又引入了内置tomcat,只要添加<scope>provided</sco ...
- Fescar: Fast & Easy Commit And Rollback
Fescar is an easy-to-use, high-performance, java based, open source distributed transaction solution ...
- tp5 删除服务器文件
public function test(){ //ROOT_PATH . 'public' . DS . 'uploads' $filename = ROOT_PATH . 'public' . D ...
- 数据结构—头插法逆转单链表——空间复杂度为O(1)
#if 1 #include<stdio.h> #include<stdlib.h> #include<iostream> using namespace std; ...
- String、StringBuffer和StringBuilder的区别及应用场景
1. 运行速度:StringBulider>StringBuffer>String String为什么运行行慢呢? String:字符串常量 StringBuffer.StringBuli ...
- 【Java】关于项目启动大请求量高负载时如何确保db等资源不出错的问题
如果一个项目启动时(单机), 瞬间来了1000个访问, 如何确保db等资源不会压垮呢? 现在想想我当时回答的并不好, 而现在看公司框架才发现其实有针对于这一块做过专门的优化的.下面就来分享下公司关 ...
- tomcat配置去掉项目名称
在web项目中,把代码部署到服务器上访问时都不带项目名,可以配置tomcat 在tomcat安装目录下,找到conf/server.xml打开 <Host name="localhos ...
- Find Longest common string
动态规划法: 用二维矩阵来的每个元素来代表两个字符串的字符匹配情况, LCS[i, j]= LCS[i-1, j-1] + 1 , if X[i-1] == Y[J-1]. LCS[i, j] =0 ...
- 使用spark访问hive错误记录
在spark集群中执行./spark-shell时报以下错误: 18/07/23 10:02:39 WARN DataNucleus.Connection: BoneCP specified but ...
- C# 中String.Join()方法
今天在工作中看到了组里一个大佬写的代码,感触颇多,同样实现一个需求,我写循环费了老大劲,代码又臭又长,大佬的代码简洁明了,三行搞定...不得不说,今天赚大了 简单总结一下今天赚到的知识 string里 ...