html iframe 子页面调用父页面的方法

2021-7-22    前端达人

还是附上代码吧。不多说,方便日后查看


父页面代码:

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>parents</title>
  5. <meta charset="UTF-8">
  6. </head>
  7. <body>
  8. <script language="javascript" type="text/javascript">
  9. function sayhello() {
  10. alert('Hello World!');
  11. }
  12. var value = 'value';
  13. </script>
  14. <div id="default">div内容</div>
  15. <iframe src="child.html"></iframe>
  16. </body>
  17. </html>

子页面

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>child</title>
  5. <meta charset="UTF-8">
  6. <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
  7. <script language="javascript" type="text/javascript">
  8. $(function() {
  9. //在iframe子页面中查找父页面元素
  10. alert($('#default', window.parent.document).html());
  11. //在iframe中调用父页面中定义的变量
  12. alert(parent.value);
  13. //在iframe中调用父页面中定义的方法
  14. parent.sayhello();
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <div>iframe子页面内容</div>
  20. </body>
  21. </html>

注意:

父页面的属性和方法必须在iframe标签之前

1

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档