今天接到任务,需求很简单将现有网站的菜单做成无刷新的,因为之前是使用frameset网页框架是标准的top,left,main。
left页面中菜单是用<a>标签做的,这样点击菜单是会看到明显的页面刷新,现在需要不出现进度加载,我第一个想到的是使用ajax
于是代码 改成了
function Display(url) { $.get(url, function (data) { $(window.top.frames["main"].document.getElementById('Display')).html(data); }); }
本想这这样就结束了,但问题随之而来,这样请求加载后a页面可以加载b页面数据,但是会将整个b页面加载过来(js不加载,但是执行了)不影响效果忽略。
运行页面问题又来了,页面做到无刷,但是在b页面写的js方法都没用了(并不是不执行而参数问题),因为之前使用js GetUrlParam('')方法获取url传值过来参数
具体方法如下
function GetUrlParam(paramName) { var url = document.URL; //URL参数,你也可以用document.URL来获取,方法太多了 var oRegex = new RegExp('[\?&]' + paramName + '=([^&]+)', 'i'); //var oMatch = oRegex.exec( window.top.location.search ) ; //获取当前窗口的URL var oMatch = oRegex.exec(url); if (oMatch && oMatch.length > 1) return oMatch[1]; //返回值 else return ''; }
现在这个方法获取不到url参数了,因为我都是ajax请求的。考虑使用后台存参数值,经测试方法复杂了,每次都需要去记录。尝试失败!
下一个问题,在b页面中如果使用$("#id").val()类似的方法,现在这些值都是undefined。原因大致明白了,但是说不清楚。
尝试方法将b页面方法写到a中(其实这样肯定是可以的)成功!不错这个方法操作性不强,因为b页面只是请求中的一个而已,总部能把所有菜单上的页面对应的js方法都写到a中吧。
继续尝试ing...
经过一番尝试,和资料查询,对于id问题我得到了解决,具体办法是加入frameset对应 例:
$(window.top.frames["main"].document.getElementById('id')).text();
这样获取值就可以了。
不过另一个问题,获取ajax传递url参数,继续探索ing...
上个问题还没解决又出新问题了T.T
我在b的button onclick中有个del()方法,del方法写在本页面中
通过ajax请求后,del()未定义了。继续探索中...
Demo下载