SVG与html的交互(svg的js与html的js互调用)

来源：互联网发布：云主机怎么绑定域名编辑：程序博客网时间：2024/06/01 08:13

这个例子显示了，在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?

<?xml version="1.0" encoding="utf-8" standalone="no" ?>
<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)">
<mce:script type="text/javascript"><!--
var svgDoc = null ;
var svgRoot = null ;
var parentWnd = null ; //保存html的window对象
//初始化
function init(evt)
{
svgDoc = evt.target.ownerDocument ;
svgRoot = svgDoc.documentElement ; //在html中的第二种交互方式会用到
parentWnd = window.parent ; //ASV 3.0可以这么写。英文6.0版的要换种写法
if(parentWnd.document.title == null || parentWnd.document.title == '')
{
alert("请不要直接在浏览器中打开‘svg’文档！");
//下面的代码作用是不提示确认关闭窗口
parentWnd.opener = null ;
parentWnd.open('', '_self') ;
parentWnd.close() ;
}
svgDoc.svgWnd = window ; //这里人为进行设定，以便在html中的第一种交互方式中可以取的到svg的window对象
}
function FunCallByHtmlJs()
{
alert('这个消息框是在html的js中调用svg的js函数产生的。') ;
}
function Click(evt)
{
var id = evt.target.id ;
if(id == 'rect') //单击在矩形上，而不是背景上时
{
if(parentWnd)
{
parentWnd.txt.value = '在svg中设置html中的text的文本内容' ;
parentWnd.FunCallBySvgJs() ; //调用html中的js函数
}
}
}
// --></mce:script>
<rect id="background" x="0" y="0" width="100%" height="100%" fill="gray" />
<rect id="rect" x="50" y="50" width="100" height="100" fill="green" />
<text font-family="SimSun" font-size="14" fill="yellow" x="50" y="50" id="text">单击svg的矩形，设置html的text文本内容</text>
</svg>

<?xml version="1.0" encoding="utf-8" standalone="no" ?><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)"><mce:script type="text/javascript"></mce:script>  <rect id="background" x="0" y="0" width="100%" height="100%" fill="gray" />  <rect id="rect" x="50" y="50" width="100" height="100" fill="green" />  <text font-family="SimSun" font-size="14" fill="yellow" x="50" y="50" id="text">单击svg的矩形，设置html的text文本内容</text></svg>

html文件的代码：

//文件名：Svg&HtmlInteractive.html

view plaincopy to clipboardprint?

<html>
<head>
<title>SVG与html的交互</title>
</head>
<body onload="htmInit()">
<mce:script type=text/javascript><!--
var svgDoc = null ;
var svgRoot = null ;
var svgWnd = null ; //svg的window对象
function htmInit()
{
txt.value = '' ;
}
function FunCallBySvgJs()
{
alert('这个消息框是在svg的js中调用html的js函数产生的。') ;
}
function Btn1Clk()
{
//第一种方式
svgDoc = emSvg.getSVGDocument() ;
if(svgDoc == null) return ;
svgRoot = svgDoc.documentElement ;
if(svgRoot == null) return ;
var rect = svgRoot.getElementById('rect') ;
if(rect) rect.setAttribute('fill', 'blue') ;
svgWnd = svgDoc.svgWnd ; //这个window对象是在svg的初始化里面添加进去的
if(svgWnd) svgWnd.FunCallByHtmlJs() ; //调用svg里的js函数
}
function Btn2Clk()
{
//第二种方式
svgWnd = emSvg.window ;
if(svgWnd == null) return ;
svgRoot = svgWnd.svgRoot ; //svgRoot在svg的js中是个全局的变量
if(svgRoot == null) return ;
var rect = svgRoot.getElementById('rect') ;
if(rect) rect.setAttribute('fill', 'red') ;
svgWnd.FunCallByHtmlJs() ; //调用svg里的js函数
}
// --></mce:script>
<input type="button" value="设置svg中矩形的填充颜色为蓝色" onclick="Btn1Clk()" />
<input type="button" value="设置svg中矩形的填充颜色为红色" onclick="Btn2Clk()" />
<input id="txt" type="text" value="" />
<embed id="emSvg" src="Svg&HtmlInteractive.svg" mce_src="Svg&HtmlInteractive.svg" width="100%" height="95%" wmode="transparent"/>
</body>
</html>

<html><head>  <title>SVG与html的交互</title></head><body onload="htmInit()"><mce:script type=text/javascript></mce:script><input type="button" value="设置svg中矩形的填充颜色为蓝色" onclick="Btn1Clk()" /><input type="button" value="设置svg中矩形的填充颜色为红色" onclick="Btn2Clk()" /><input id="txt" type="text" value="" /><embed id="emSvg" src="Svg&HtmlInteractive.svg" mce_src="Svg&HtmlInteractive.svg" width="100%" height="95%" wmode="transparent"/></body></html>

效果图：