TreeView节点点击 + iframe四画面显示问题（有点小难度）

[暖枫无敌]

如下图所示，左侧是动态生成的树形控件，点击每个水库，会给右边的页面传递一个唯一标识的水库ID值，根据此ID值在右边显示该点的实时视频画面。

现在问题是：
展开树节点，每点击一个水库，在右侧显示其视频，点击一下，在第一个iframe里显示，再点击其他的一个，在第二个iframe里显示，再点击另外一个，在第三个iframe里显示，点击第四下，在第四个iframe里显示，点击第五下时，覆盖第一个iframe，在第一个iframe里显示视频，依次类推。

难点在：左侧TreeView中动态生成的节点的NavigateUrl是这样的：
SubNode.NavigateUrl = "center.aspx?SKID=" + drv2["水库ID"].ToString();

右侧页面，通过接受参数，取得视频画面，放到iframe里显示，点击一下，是可以得到第一个视频画面，但是在左侧再点击另外一个水库的话，右侧的页面是重新刷新，然后重新加载显示，不过还是第一个，有什么办法解决？？当点击左侧另外一个水库时，右边的页面的第二个iframe显示我得到的视频画面呢？？？

或者是各位有什么更好的实现办法？？在此讨论一下

[暖枫无敌]

图部分被遮住了，重新上图

[暖枫无敌]

尝试了在右边的页面使用Session来记录页面接受参数的次数，然后通过模4求余来显示页面，但好像不大管用啊。

前台：

<div class="top">
    <div class="a1">
      <div class="b1">
        <iframe id="if_left_top" scrolling="no" frameborder="1" height="100%" src='<%=url1%>'
          width="100%"></iframe>
      </div>
      <div class="b2">
        <iframe id="if_right_top" scrolling="no" frameborder="1" height="100%" src='<%=url2%>'
          width="100%"></iframe>
      </div>
      <div class="b3">
        <iframe id="if_left_bottom" scrolling="no" frameborder="1" height="100%" src='<%=url3%>'
          width="100%"></iframe>
      </div>
      <div class="b4">
        <iframe id="if_right_bottom" scrolling="no" frameborder="1" height="100%" src='<%=url4%>'
          width="100%"></iframe>
      </div>
    </div>

后台：

    public int i = 0;//全局控制显示视频的数量
    public string url1 = string.Empty;
    public string url2 = string.Empty;
    public string url3 = string.Empty;
    public string url4 = string.Empty;
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //接受SKID，若是第一次加载的话，不显示任何水库信息
            try
            {
                skid = Request.QueryString["SKID"];
                if(!string.IsNullOrEmpty(skid))
                {
                    Session["index"] = (i++).ToString();
                    if(int.Parse(Session["index"].ToString())%4==0)
                    {
                         //在第一个iframe里显示视频
                        url1 = getUrl(skid);
                    }
                    else if (int.Parse(Session["index"].ToString()) % 4 == 1)
                    {
                        url2 = getUrl2(skid);
                    }
                    else if (int.Parse(Session["index"].ToString()) % 4 == 2)
                    {
                        url3 = getUrl3(skid);
                    }
                    else if (int.Parse(Session["index"].ToString()) % 4 == 3)
                    {
                        url4 = getUrl4(skid);
                    }
                }
            }
            catch (Exception)
            {
                skid = "";
                url1 = "";
                url2 = "";
                url3 = "";
                url4 = "";
            }
        }
    }

[CSDN_CODER]

[暖枫无敌]

不能让我的帖子给沉掉了，浮起来

[子夜__]

SubNode.NavigateUrl = "center.aspx?SKID=" + drv2["水库ID"].ToString();

加个随机数。

超链接动态改变下target 为iframe2

[hchxxzx]

准备睡觉了,没有办法具体实现代码.
给你个提示:
这种需求,需要通过脚本来实现.
1.将treeview的url修改为 : NavigateUrl = "javascript:脚本方法(ID);"
2.在脚本方法中,将当前的ID记录下来,需要2个值,一个记录当前的ID,一个记录其已经在哪个iframe中实现(你可规划为4个iframe),记录此数据的目的,主要在于当重复点击某个链接时,不至于右侧的页面乱跳,而是前面已经点击过的,不需要再刷新.
3.当点击节点,激发脚本方法时,判断前面记录的ID是否已经存在,如果是,不需要刷新;如果不存在,说明是新的请求,查找上述记录,还有没有空闲的地方(记录只能存在4个),如果有则根据其次序,让右侧的iframe改变src;如果已经没有空闲了,将第一个记录修改为当前点击的ID,并指向右侧的页面.

这里面主要实现的有2点.
1.需要记录原来点击过的ID,并组织形成固定的几个记录(如果是4个页面则固定4条记录),此操作在脚本进行.
2.如何指挥右侧的页面刷新?
可以使用top.frames[2].frames[N].src = "";的形式来实现.
top是表示查找到当前框架页面的顶级页面(default)
第一个frames,是指从顶级页面中查找第N个框架页面,如果是上左右的框架,则其次序为:上0,左1,右2
第二个frames,是指从找到的右侧的页面中,查找第N个iframe对象
找到之后,即可指挥其Src进行改变了.

[接分为押宝]

[Quote=引用 8 楼 wangrui0610 的回复:]

js可以做到：

Default.aspx页面代码（显示菜单）
HTML code

<script type="text/javascript">
var index = 0;
function showVedio(vedioId) {
window.iframeRight.frames[index].location.href=……
[/Quote]
貌似这个做法不错...
学习中...

[暖枫无敌]

[大笨蛋]

js可以做到：

Default.aspx页面代码（显示菜单）

<script type="text/javascript">
        var index = 0;
        function showVedio(vedioId) {
            window.iframeRight.frames[index].location.href="Default3.aspx?id=" + vedioId;
            if (index == 3) {
                index = 0;
            }
            else {
                index++;
            }
        }
    </script>
<table style="border-style: double; border-width: 1px; border-color: inherit; width:700px; height:600px; ">
        <tr>
            <td style="width:200px;text-align:center;vertical-align:top;">
                <a href="javascript:;" onclick="showVedio(1);">水库1</a><br /><br />
                <a href="javascript:;" onclick="showVedio(2);">水库2</a><br /><br />
                <a href="javascript:;" onclick="showVedio(3);">水库3</a><br /><br />
                <a href="javascript:;" onclick="showVedio(4);">水库4</a><br /><br />
                <a href="javascript:;" onclick="showVedio(5);">水库5</a><br /><br />
            </td>
            <td style="width:500px;height:600px;">
                <iframe id="iframeRight" name="iframeRight" src="Default2.aspx" scrolling="no" frameborder="1" height="100%" width="100%">
                </iframe>
            </td>
        </tr>
    </table>

Default2.aspx代码（显示四个视频框）

<table style="width: 400px; height: 400px;">
        <tr>
            <td style="width: 200px; height: 200px;">
                <iframe id="if_left_top" scrolling="no" frameborder="1" height="100%" width="100%">
                </iframe>
            </td>
            <td style="width: 200px; height: 200px;">
                <iframe id="if_right_top" scrolling="no" frameborder="1" height="100%" width="100%">
                </iframe>
            </td>
        </tr>
        <tr>
            <td style="width: 200px; height: 200px;">
                <iframe id="if_left_bottom" scrolling="no" frameborder="1" height="100%" width="100%">
                </iframe>
            </td>
            <td style="width: 200px; height: 200px;">
                <iframe id="if_right_bottom" scrolling="no" frameborder="1" height="100%" width="100%">
                </iframe>
            </td>
        </tr>
    </table>

你可以在Default3.aspx中输出request值测试。
时间关系，上面的js没有判断点击视频是不是正在播放，可以定义数组保存，再做判断。

[暖枫无敌]

后来该用Silverlight来实现了，js的后来有时间再来重新研究一下。

[telankes2000]

从菜单栏点击任何选项后 转到center.aspx页面
因为已经知道有4个frame,所以把frame的状态都存入cookie
每次进入center.aspx页面时就从cookie里检查每个frame的状态 

楼主把这段代码加载center.aspx里面
var Cookie = {
            setCookie: function(cookieName, cookieValue, cookieOptions) {
                var path = cookieOptions.path ? "; path=" + (cookieOptions.path) + "" : "; path=/";
                var domain = cookieOptions.domain ? "; domain=" + (cookieOptions.domain) + "" : "";
                var secure = cookieOptions.secure ? "; secure" : "";
                var date = new Date();
                var expiresTime = 1000 * 60;
                date.setTime(date.getTime() + (cookieOptions.expires ? expiresTime * cookieOptions.expires : expiresTime * 20)); //如果不設置cookie過期時間 默認為20分鐘
                var expires = "; expires=" + date.toGMTString();
                document.cookie = "" + cookieName + "=" + encodeURIComponent(cookieValue) + "" + expires + "" + path + "" + domain + "" + secure + "";
            },
            getCookie: function(cookieName) {
                if (document.cookie != "") {
                    var str, cookies = document.cookie.split(";");
                    for (var i = 0; i < cookies.length; i++) {
                        str = cookies[i].split("=");
                        if (str[0] == cookieName)
                            return decodeURIComponent(str[1]);
                    }
                }
                return null;
            },
            removeCookie: function(cookieName) {
                if (document.cookie != "") {
                    var date = new Date();
                    date.setTime(date.getTime() - 100000);
                    var expires = "; expires=" + date.toGMTString();
                    document.cookie = "" + cookieName + "=" + expires + "";
                }
            }
        }

        function ConvertObjectToString(obj) {
            var arr = [], ret = "";
            for (var o in obj) {
                ret = "\"" + o + "\":";
                var arr2 = [];
                for (var value in obj[o]) {
                    arr2.push("\"" + value + "\":\"" + obj[o][value] + "\"");
                }
                ret += "{" + arr2.join(",") + "}";
                arr.push(ret);
            }
            return "{" + arr.join(",") + "}";
        }
        function ConvertStringToObject(str) {
            var fun = new Function("return" + str + "");
            return fun();
        }

        function ResetFrames(frm, url) {
            var index = 0;
            for (var s in frm) {
                if (frm[s].IsLoad == "false") {
                    index++;
                }
            }
            if (index == 4) {//如果所有的frame的IsLoad=false表明 该论循环结束 就是4个frame都加载过了 现在重新设置IsLoad=true 以便再次进入循环
                for (var a in frm) {
                    frm[a].IsLoad = "true"  
                }
            }
            for (var f in frm) {
                if (frm[f].IsLoad == "true") {
                    frm[f].LoadCount = parseInt(frm[f].LoadCount) + 1; //记录frame加载的次数
                    frm[f].SRC = url;
                    frm[f].IsLoad = "false";//设置frame状态
                    document.getElementById(f).src = url;
                    break;
                }
            }
            Cookie.setCookie("Frames", ConvertObjectToString(frm), { expires: 60 * 24 }); //保存
        }
        window.onload = function() {
            var frm = Cookie.getCookie("Frames");
            if (frm == null) {/*SRC:Frame指向的url地址;IsLoad:加载状态;LoadCount:加载次数*/
                frm = "{'frame1': {'SRC': '','IsLoad':'false','LoadCount':'0'}, 'frame2': { 'SRC': '','IsLoad':'false' ,'LoadCount':'0'}, 'frame3': { 'SRC': '','IsLoad':'false','LoadCount':'0' }, 'frame4': { 'SRC': '','IsLoad':'false','LoadCount':'0'} }";
                Cookie.setCookie("Frames", frm, { expires: 60 * 24 });
            }
            frm = ConvertStringToObject(frm);
            var url = "center.aspx?SKID=<%=SKID %>"; /*楼主要再新建个页面center2.aspx来显示数据  center.aspx只是作为4个frame的载体 */
            var count = 0;
            for (var f in frm) {
                if (frm[f].IsLoad == "false" && parseInt(frm[f].LoadCount) == 0) {//如果当前frame为初次加载
                    frm[f].SRC = url;
                    frm[f].IsLoad = "true";//设置frame的加载状态
                    Cookie.setCookie("Frames", ConvertObjectToString(frm), { expires: 60 * 24 }); //保存
                    document.getElementById(f).src = url;
                    break; //保证一次只有一个frame加载画面
                }
                else {
                    count++; //计算已经加载过的Frame数量
                    if (count == 4) {//如果所有的frame都已经加载过
                        ResetFrames(frm, url);
                    }
                    document.getElementById(f).src = frm[f].SRC;
                }
            }
        }

[暖枫无敌]

非常感谢楼上的，非常感谢，可惜分已散，抱歉。

[telankes2000]

你看下能实现你的需求吗？
我想应该是可以的
这句改下
var url = "center2.aspx?SKID=<%=SKID %>";

center.aspx页面应该是这样子：

 <iframe id="frame1"></iframe>
        <iframe id="frame2"></iframe>
        <iframe id="frame3"></iframe>
        <iframe id="frame4"></iframe>

protected string SKID {
            get { return Request.QueryString["SKID"]; }
        }