当前位置:Gxlcms > 前端框架 > javascript调用父窗口的方法有哪些

javascript调用父窗口的方法有哪些

时间:2021-07-01 10:21:17 帮助过:26人阅读

javascript调用父窗口的方法:1、使用“window.parent”语句,可在iframe页面调用父页面对象;2、使用“window.opener”语句,可在“window.open”打开的子页面中调用父页面对象。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

javascript调用父窗口(父页面)的方法有哪些

1、window.parent 是iframe页面调用父页面对象

举例:

a.html

  1. <html>
  2. <head><title>父页面</title></head>
  3. <body>
  4. <form name="form1" id="form1">
  5. <input type="text" name="username" id="username"/>
  6. </form>
  7. <iframe src="b.html" width=100%></iframe>
  8. </body>
  9. </html>

如果我们需要在b.htm中要对a.htm中的username文本框赋值,就如很多上传功能,上传功能页在Ifrmae中,上传成功后把上传后的路径放入父页面的文本框中
我们应该在b.html中写

  1. <script type="text/javascript">
  2. var _parentWin = window.parent ;
  3. _parentWin.form1.username.value = "xxxx" ;
  4. </script>

源码:

a.html

  1. <html>
  2. <head>
  3. <title>主页面</title>
  4. <script>
  5. /** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */
  6. var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";
  7. function parentInvokeIFrame()
  8. {
  9. var iframeTest = document.frames["iframeTest"]; //使用document.getElementById("iframeTest");同样可以
  10. alert(iframeTest.document.body.innerHTML);
  11. alert(iframeTest.iFrameVair);
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <form name="form1" id="form1">
  17. <input type="text" name="username" id="username"/>
  18. <input type = "button" value = "父窗口调用IFrame子窗口中的内容" onclick = 'parentInvokeIFrame()'/>
  19. </form>
  20. <iframe src="b.html" width = '100%' id = 'iframeTest'></iframe>
  21. </body>
  22. </html>

b.html

  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript">
  5. /** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */
  6. var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";
  7. function UpdateParent()
  8. {
  9. var _parentWin = window.parent ;
  10. _parentWin.form1.username.value = "xxxx" ;
  11. }
  12. function childInvokeParent()
  13. {
  14. var parentVairous = window.parent.window.parentVairous;
  15. alert(parentVairous);
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <form name="form1" id="form1">
  21. <p> </p>
  22. <p align="center">
  23. <input type = "button"
  24. name = "button"
  25. id = "button"
  26. value = "更新主页面的UserName内容"
  27. onclick = "UpdateParent()">
  28. <input type = "button"
  29. name = "button2"
  30. id = "button2"
  31. value = "测试IFrame子窗口调用父窗口的全局变量"
  32. onclick = "childInvokeParent();"/>
  33. </p>
  34. <p> </p>
  35. </form>
  36. </body>
  37. </html>

ps:不能跨域获取,例如iframe的src是'http://www.xxx.ccc/'就不可以

2、window.opener 是window.open 打开的子页面调用父页面对象

源码:

a.html

  1. <html>
  2. <head>
  3. <title>主页面</title>
  4. <script type="text/javascript">
  5. /** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */
  6. var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";
  7. /**
  8. * 因为不同于IFrame(IFrame有id,window.open()与IFrame的父子窗口的模式不同),
  9. * 所以当是通过window.open()方法打开一个新窗口使, 必须有一个新窗口的对象
  10. * 当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常
  11. */
  12. var OpenWindow;
  13. function openSubWin()
  14. {
  15. OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no, status=no');
  16. }
  17. function parentInvokeChild()
  18. {
  19. if(OpenWindow)//当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常
  20. {
  21. alert(OpenWindow.iFrameVair);
  22. }
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <form name="form1" id="form1">
  28. <input type="text" name="username" id="username"/>
  29. <input type="button" value="弹出子页面" onclick = "openSubWin()">
  30. <input type="button" value="测试调用弹出窗口中的全局变量" onclick = "parentInvokeChild()">
  31. </form>
  32. </body>
  33. </html>

b.html

  1. <html>
  2. <head>
  3. <title>子页面</title>
  4. <script type="text/javascript">
  5. /** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */
  6. var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";
  7. function UpdateParent()
  8. {
  9. var _parentWin = window.opener;
  10. _parentWin.form1.username.value = "xxxx" ;
  11. }
  12. function childInvokeParent()
  13. {
  14. var parentVairous = window.opener.window.parentVairous;
  15. alert(parentVairous);
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <form name="form1" id="form1">
  21. <p> </p>
  22. <p align="center">
  23. <input type="button"
  24. onclick = "UpdateParent();"
  25. name="button"
  26. id="button"
  27. value="更新主页面的UserName内容">
  28. <input type = "button"
  29. name = "button2"
  30. id = "button2"
  31. value = "测试IFrame子窗口调用父窗口的全局变量"
  32. onclick = "childInvokeParent();"/>
  33. </p>
  34. <p> </p>
  35. </form>
  36. </body>

【相关推荐:javascript学习教程

以上就是javascript调用父窗口的方法有哪些的详细内容,更多请关注gxlcms其它相关文章!

人气教程排行