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>