SharePoint 2013/2010 点击 Viso web part中的节点相同页面的IFrame显示节点的超连接指向的页面
SharePoint Viso service 可以在线显示Viso的网页版文件(.vdw),并提供一套API对其操作http://msdn.microsoft.com/en-us/library/ff394593.aspx。
本文讲述SharePoint 2013/2010 点击 Viso web part中的节点相同页面的IFrame显示节点的超连接指向的页面。
1. 创建一个Viso文件，向其中添加若干节点，并给节点添加超连接
2. 将该Viso文件保存为VisoJS.vdw并上传至SharePoint 网站的文档库中
3. 新建一个页面，向其中插入Viso access web part,并设置要显示的vdw路径
4. 添加嵌入(Embed)Javascript 代码
插入代码如下（注意替换WebPartWPQ2为对应的Viso web part的ID）：
<IFrame id="visoTestFrame" ></IFrame><script type="text/javascript" > // 注册Viso/Execel applation service web part 加载事件 Sys.Application.add_load(onApplicationLoad); // Viso webpart 的ID,可通过查看网页源代码或F12找到 var webPartId = "WebPartWPQ2"; var vwaControl; var currentShape; // 处理Viso/Execel applation service web part 加载事件 function onApplicationLoad() { try { vwaControl = new Vwa.VwaControl(webPartId); // 注册绘画完成事件 vwaControl.addHandler("diagramcomplete", onDiagramComplete); } catch (err) { alert("onApplicationLoad\n" + err); } } // 处理Viso绘图完成事件 function onDiagramComplete() { try { // 注册当前选中的Shape发生变化事件 vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged); // 注册鼠标离开图形的事件 vwaControl.addHandler("shapemouseleave", onMouseLeaveShape); // 注册鼠标进入图形的事件 vwaControl.addHandler("shapemouseenter", onMouseEnterShape); } catch (err) { alert("onDiagramComplete\n" + err); } } // 处理当前选中的Shape发生变化 function onShapeSelectionChanged(sender, args) { // 取当前选中的图形 var shape = GetShapeById(args); // 取图形上附加的超链接 var links = shape.getHyperlinks(); // 取第一个超链接并将visoTestFrame的 source url设置为该超链接所指向的地址 if (links.length >= 1) { var visoTestFrame = $("#visoTestFrame")[0]; if (visoTestFrame) { visoTestFrame.src = links[0].value; visoTestFrame.width = 600; visoTestFrame.height = 800; } } // 可以给图形添加Highlit的颜色(可使用removeHighlight移除)，但是如果完全覆盖了图形，则图形不能响应所有鼠标事件(select, mouse enter, mouse leave) // shape.addHighlight(30, "#FF0000"); } // 处理鼠标进入事件 function onMouseEnterShape(sender, args) { currentShape = GetShapeById(args); console.log("onMouseEnterShape, ID:" + args); } // 处理鼠标离开事件 function onMouseLeaveShape(sender, args) { currentShape = null; console.log("onMouseLeaveShape, ID:" + args); } // 添加覆盖层，缺点是添加完Overlay后，该图形就不能相应选中事件了， 可使用removeOverlay移除 function AddOverlay(vwaShape, color) { if (!color) color = "#88FF0000"; vwaShape.addOverlay( "Overlay", "<Rectangle Height=\"" + vwaShape.getBounds().height + "\"" + " Width=\"" + vwaShape.getBounds().width + "\"" + " Stroke=\"Black\" StrokeThickness=\"1\" Fill=\"" + color + "\"" + " RadiusX=\"0.0\" RadiusY=\"0.0\"\/>", 1, 1, vwaShape.getBounds().width, vwaShape.getBounds().height); } // 根据图形的id取图形 function GetShapeById(id) { // 取得当前处于活动状态的Viso页面 var vwaPage = vwaControl.getActivePage(); // 取得该页面上的所有图形，包括箭头 var vwaShapes = vwaPage.getShapes(); // 根据图形的id取图形 var vwaShape = vwaShapes.getItemById(id); return vwaShape; } </script>