SVG与html的交互(svg的js与html的js互调用)
这个例子显示了，在html中单击命令按钮设定svg中的矩形的填充颜色，并且调用svg的js函数FunCallByHtmlJs，产生个消息框。
在svg中，单击矩形时，设置html中的text的文本内容，并且调用html的js函数FunCallBySvgJs，产生个消息框。
svg文档以嵌入在html文档中运行。
例子在IE 6.0 + Adobe SVG Viewer 3.03中文版下测试通过。
svg文件的代码：
//文件名：Svg&HtmlInteractive.svg
view plaincopy to clipboardprint?
1. <?xml version="1.0" encoding="utf-8" standalone="no" ?>
2. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" onload="init(evt)" onclick="Click(evt)">
3. <mce:script type="text/javascript"><!--
4. var svgDoc = null ;
5. var svgRoot = null ;
6. var parentWnd = null ; //保存html的window对象
7. //初始化
8. function init(evt)
9. {
10. svgDoc = evt.target.ownerDocument ;
11. svgRoot = svgDoc.documentElement ; //在html中的第二种交互方式会用到
12. parentWnd = window.parent ; //ASV 3.0可以这么写。英文6.0版的要换种写法
13. if(parentWnd.document.title == null || parentWnd.document.title == '')
14. {
15. alert("请不要直接在浏览器中打开‘svg’文档！");
16. //下面的代码作用是不提示确认关闭窗口
17. parentWnd.opener = null ;
18. parentWnd.open('', '_self') ;
19. parentWnd.close() ;
20. }
21. svgDoc.svgWnd = window ; //这里人为进行设定，以便在html中的第一种交互方式中可以取的到svg的window对象
22. }
23. function FunCallByHtmlJs()
24. {
25. alert('这个消息框是在html的js中调用svg的js函数产生的。') ;
26. }
27. function Click(evt)
28. {
29. var id = evt.target.id ;
30. if(id == 'rect') //单击在矩形上，而不是背景上时
31. {
32. if(parentWnd)
33. {
34. parentWnd.txt.value = '在svg中设置html中的text的文本内容' ;
35. parentWnd.FunCallBySvgJs() ; //调用html中的js函数
36. }
37. }
38. }
39. // --></mce:script>
40. <rect id="background" x="0" y="0" width="100%" height="100%" fill="gray" />
41. <rect id="rect" x="50" y="50" width="100" height="100" fill="green" />
42. <text font-family="SimSun" font-size="14" fill="yellow" x="50" y="50" id="text">单击svg的矩形，设置html的text文本内容</text>
43. </svg>
html文件的代码：
//文件名：Svg&HtmlInteractive.html
view plaincopy to clipboardprint?
1. <html>
2. <head>
3. <title>SVG与html的交互</title>
4. </head>
5. <body onload="htmInit()">
6. <mce:script type=text/javascript><!--
7. var svgDoc = null ;
8. var svgRoot = null ;
9. var svgWnd = null ; //svg的window对象
10. function htmInit()
11. {
12. txt.value = '' ;
13. }
14. function FunCallBySvgJs()
15. {
16. alert('这个消息框是在svg的js中调用html的js函数产生的。') ;
17. }
18. function Btn1Clk()
19. {
20. //第一种方式
21. svgDoc = emSvg.getSVGDocument() ;
22. if(svgDoc == null) return ;
23. svgRoot = svgDoc.documentElement ;
24. if(svgRoot == null) return ;
25. var rect = svgRoot.getElementById('rect') ;
26. if(rect) rect.setAttribute('fill', 'blue') ;
27. svgWnd = svgDoc.svgWnd ; //这个window对象是在svg的初始化里面添加进去的
28. if(svgWnd) svgWnd.FunCallByHtmlJs() ; //调用svg里的js函数
29. }
30. function Btn2Clk()
31. {
32. //第二种方式
33. svgWnd = emSvg.window ;
34. if(svgWnd == null) return ;
35. svgRoot = svgWnd.svgRoot ; //svgRoot在svg的js中是个全局的变量
36. if(svgRoot == null) return ;
37. var rect = svgRoot.getElementById('rect') ;
38. if(rect) rect.setAttribute('fill', 'red') ;
39. svgWnd.FunCallByHtmlJs() ; //调用svg里的js函数
40. }
41. // --></mce:script>
42. <input type="button" value="设置svg中矩形的填充颜色为蓝色" onclick="Btn1Clk()" />
43. <input type="button" value="设置svg中矩形的填充颜色为红色" onclick="Btn2Clk()" />
44. <input id="txt" type="text" value="" />
45. <embed id="emSvg" src="Svg&HtmlInteractive.svg" mce_src="Svg&HtmlInteractive.svg" width="100%" height="95%" wmode="transparent"/>
46. </body>
47. </html>
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
