使用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 ...
随机推荐
- iOS保持待续连接
当iphone应用程序进行网络编程时,切到后台后,socket连接会断掉,ios的设计就是这样. 但是好在apple公司也没有那么绝,还是有一些东西可以在后台运行的(backgroundmodes), ...
- pymysql操作mysql的脚本示例
#!/usr/bin/env python#-*- coding:UTF-8 -*- from multiprocessing import Process , Queuefrom queue imp ...
- Pycharm 常用快捷键与设置
pycharm高频率使用的快捷键 Ctrl+Shift+F10 运行当前的页面 Ctrl + / 注释(取消注释)选择的行 Ctrl+Shift+F 高级查找 Shift + Enter 开始新行 T ...
- app内嵌vue h5,安卓和ios拦截H5点击事件
安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.sh ...
- Lucene分词详解
分词和查询都是以词项为基本单位,词项是词条化的结果.在Lucene中分词主要依靠Analyzer类解析实现.Analyzer类是一个抽象类,分词的具体规则是由子类实现的,所以对于不同的语言规则,要有不 ...
- 2.8 break和continue
一.区别: break:终止整个循环. continue:中止一次循环,进入下一次循环. 1.1 break: public class Test14{ public static void main ...
- NPM,bower的安装目录
npm安装成功的话(需设置系统环境变量,见http://www.cnblogs.com/liaocheng/p/4531898.html有介绍) npm的安装目录 安装nodejs时,如果没有设置以下 ...
- Android Historian安装使用
1.先安装docker 2.安装Historian,可使用如下docker镜像: sudo docker run -p 9000:9999 registry.cn-hangzhou.aliyuncs. ...
- Python基础:十、用户交互
使用input()函数,可以让我们和计算机互动起来 a. 等待输入 b. 将输入的内容赋值给前面的变量 c. input()接受到的内容永远是字符串 变量 = input("提示信息&quo ...
- python unittest框架
四个部分: test fixture A test fixture represents(代表) the preparation needed to perform one or more tests ...