js window.opener 子页面 父页面 传

一、js window.opener 子页面 父页面 传

1、新建一个子页面，页面演示代码如图所示，定义了一个testChild方法，放置一个按钮，用来触发调用父页面定义的js方法。

2、再建一个父页面，页面演示代码如图所示，定义了一个testParent方法，也放置一个按钮，用来触发调用子页面定义的js方法，父页面还需要使用<iframe name="myFrame" src="child.html"></iframe>引入子页面。

3、打开浏览器访问父页面，页面打开效果如图所示，父页面里面嵌套了一个子页面，父子页面都有一个按钮。

4、在父页面中，点击调用子页面中的函数按钮，显示“我是子页面”，这个信息是子页面方法里的，说明父页面已经成功调用了子页面定义的js方法。

5、在子页面中，点击调用子页面中的函数按钮，显示“我是父页面”，这个信息是父页面方法里的，说明子页面已经成功调用了父页面定义的js方法

6、从上面的例子代码和测试的效果，可以总结。

二、js冲突怎么解决

1、a．最容易出现的就是js的命名冲突

2、变量有全局变量和局部变量当全局变量变量和局部变量名称一致时，就会js冲突，由于变量传递数值或地址不同就会产生JavaScript错误，甚至死循环。

3、函数中有很多方法，不同的js之间可能函数名一样，这就使得程序执行时不知道改调用那个方法或者哪个方法执行后的结果，最终导致程序加载失败。

4、一般是命名导致JS冲突。解决方法主要是查找在加载的js中是否具有相同命名的情况，然后修改命名

5、如果在js中调用了window.onload= function()，同时在页面上又有body onload语句,会导致window.onload事件覆盖掉body onload事件而出现错误.

6、解决方法：attachEvent给onload添加所需运行的函数。

7、c.浏览器不兼容问题，虽然这个不属于js冲突但是也常见的js的原因之一

8、(1)现有问题:现有代码中存在许多document.formName.item("itemName")这样的语句，不能在Fx下运行

9、(2)解决方法:改用document.formName.elements["elementName"]

10、(1)现有问题:现有代码中许多集合类对象取用时使用()，IE能接受，Fx不能。

11、(2)解决方法:改用[]作为下标运算。如:document.forms("formName")改为document.forms["formName"]。又如:document.getElementsByName("inputName")(1)改为document.getElementsByName("inputName")

12、(1)现有问题:使用window.event无法在Fx上运行

13、(2)解决方法: Fx的event只能在事件发生的现场使用，此问题暂无法解决。可以这样变通:

14、<inputtype="button" name="someButton" value="提交

15、"onclick="javascript:gotoSubmit()"/>

16、<script language="javascript">

17、<input type="button" name="someButton" value="提交"

18、onclick="javascript:gotoSubmit(event)"/>

19、<script language="javascript">

20、evt= evt? evt:(window.event? window.event: null);

21、此外，如果新代码中第一行不改，与老代码一样的话(即gotoSubmit调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案tpl部分仍与老代码兼容。

22、④HTML对象的id作为对象名的问题

23、(1)现有问题：在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用。在Fx中不能。

24、(2)解决方法：用getElementById("idName")代替idName作为对象变量使用。

25、⑤用idName字符串取得对象的问题

26、(1)现有问题：在IE中，利用eval(idName)可以取得id为idName的HTML对象，在Fx中不能。

27、(2)解决方法：用getElementById(idName)代替eval(idName)。

28、⑥变量名与某HTML对象id相同的问题

29、(1)现有问题：在Fx中，因为对象id不作为HTML对象的名称，所以可以使用与HTML对象id相同的变量名，IE中不能。

30、(2)解决方法：在声明变量时，一律加上var，以避免歧义，这样在IE中亦可正常运行。

31、此外，最好不要取与HTML对象id相同的变量名，以减少错误。

32、(1)现有问题：在IE中，event对象有x, y属性，Fx中没有。

33、(2)解决方法：在Fx中，与event.x等效的是event.pageX。但event.pageX IE中没有。

34、故采用event.clientX代替event.x。在IE中也有这个变量。

35、event.clientX与event.pageX有微妙的差别(当整个页面有滚动条的时候)，不过大多数时候是等效的。如果要完全一样，可以稍麻烦些:

36、mX= event.x? event.x: event.pageX;

37、(3)其它：event.layerX在IE与Fx中都有，具体意义有无差别尚未试验。

38、(1)现有问题：在IE中可以用window.testFrame取得该frame，Fx中不行

39、(2)解决方法：在frame的使用方面Fx和ie的最主要的区别是:如果在frame标签中书写了以下属性:

40、<frame src="xx.htm" id="frameId" name="frameName"/>

41、那么ie可以通过id或者name访问这个frame对应的window对象，而Fx只可以通过name来访问这个frame对应的window对象，例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问

42、 ie: window.top.frameId或者window.top.frameName来访问这个window对象

43、Fx:只能这样window.top.frameName来访问这个window对象

44、另外，在Fx和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签，并且可以通过window.top.document.getElementById("testFrame").src='xx.htm'来切换frame的内容，也都可以通过window.top.frameName.location='xx.htm'来切换frame的内容

45、⑨在Fx中，自己定义的属性必须getAttribute()取得

46、⑩在Fx中没有parentElement parement.children而用

47、parentNode parentNode.childNodes

48、childNodes的下标的含义在IE和Fx中不同，Fx使用DOM规范，childNodes中会插入空白文本节点。

49、一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时，IE和Fx对parentNode的解释不同，例如：

50、Fx中input.parentNode的值为form,而IE中input.parentNode的值为空节点

51、Fx中节点没有removeNode方法，必须使用如下方法node.parentNode.removeChild(node)

52、(1)现有问题:在IE中不能使用const关键字。如const constVar= 32;在IE中这是语法错误。

53、(2)解决方法:不使用const，以var代替。

54、Fx的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

55、在js中如果书写url就直接写&不要写&例如var url='xx.jsp?objectName=xx&objectEvent=xxx';

56、frm.action= url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器

57、一般会服务器报错参数没有找到,当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&

58、(1)现有问题:在Fx中，所有节点均有nodeName值，但textNode没有tagName值。在IE中，nodeName的使用好象

59、有问题(具体情况没有测试，但我的IE已经死了好几次)。

60、(2)解决方法:使用tagName，但应检测其是否为空。

61、元素属性：IE下input.type属性为只读，但是Fx下可以修改

62、document.getElementsByName()和document.all[name]的问题

63、(1)现有问题:在IE中，getElementsByName()、document.all[name]均不能用来取得div元素(是否还有其它不能取的元素还不知道)。

三、jstree判断是否有下级节点

1、用is_parent( node)方法, node传节点ID或节点对象,有下级节点则返回true.

2、用is_leaf(node)方法,此方法表示是否为最末级,刚好和is_parent相反.

3、在事件中获取node对象,其中node.child为包含所有直接子节点的数组, node.child.length=== 0则没有下级节点.

4、<divid="tree"></div>

JavaScript

5、{id:'1',parent:'#',text:"1"},

6、{id:'2',parent:'1',text:"11"},

7、{id:'3',parent:'1',text:"12"},

8、{id:'4',parent:'2',text:"111"}

9、$tree.on('ready.jstree',function(){

10、$tree.jstree('is_parent','2');//true

11、$tree.jstree('is_leaf','2');//false

12、tree.is_parent('4');//false

13、tree.is_leaf('4');//true

14、//注意:jstree的初始化是一个异步过程,如果上述代码没有放在初始化完成的事件中,将不会得到正确的结果,因为执行代码时,jstree还没生成.

15、$tree.on('select_node.jstree',function(e,data){

16、console.log('此节点有下级节点');

17、if(tree.is_parent(node))//这里无需tree.is_parent(node.id),is_parent方法可以node对象作为参数.

18、console.log('此节点有下级节点');