• JavaScript从父页面获取子页面的值(子页面又如何访问父页面)


    之前还真没做过类似的东西,,top页面获取子页面的document。。

    在百度搜了下即找到这个东东,还好,能用。

    主要就是使用 contentWindow方法,获取子页面的所有document,再做处理。

    通过js从父页面获取子页面的值

    通常在很多情况下都会遇到通过js来传值的问题,只要通过一些页面关联,他们的值就可以互相传递,其中应用框架的时候传值问题可能会遇到更多一些

    1、从父页面传值到子页面可能很容易办到,在很多情况下可以不通过js来传就可以达到目的,但从子页面把数据传给父页面就不是那么容易了,其实思路很简单,首先你要通过父页面找到子页面,按照W3C标准来,语法如下:

    document.getElementById('iframe1').contentWindow;


    取到子页面对象

    2、此文为了达到一个很醒目的效果,做了一个很即时的例子,当鼠标选中子页面的任何文字的时候,父页面的text里面就把显示出来,通过 getSelection和selection.createRange方法来实现,关于selection.createRange是只能在ie6上面 能用,所以要加。

    具体代码如下:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <body>
    <input type="text" id="text1">
    <iframe src="http://blog.snsgou.com/blog/download/demo1.html" id="iframe1" name="iframe1" style="60%; height:60%;">
    </iframe>
    </body>
    </html>
    <script language="JavaScript">
    var childHtml = document.getElementById("iframe1").contentWindow;
    var parentText = document.getElementById("text1");
    if (childHtml.document.selection) {
    	childHtml.document.onmouseup = function() {
    		parentText.value = childHtml.document.selection.createRange().text;
    	}
    } else {
    	childHtml.onmouseup = function() {
    		parentText.value = childHtml.window.getSelection();
    	}
    }
    </script>


     
    附加说明:

    子页面访问父页面:通过关键字 parent 获取父页面对象

    parent.document.getElementById('***')......
     

  • 相关阅读:
    Element-UI中Upload上传文件前端缓存处理
    Puppeteer前端自动化测试实践
    javascript-高级用法
    什么是闭包?闭包的优缺点?
    浅谈网站性能之前端性能优化
    2019前端面试题汇总(主要为Vue)
    从官网学习Node.js FS模块方法速查
    这才是官方的tapable中文文档
    面试官问:JS的this指向
    开启梦幻般的webrtc之旅
  • 原文地址:https://www.cnblogs.com/52php/p/5660029.html
Copyright © 2020-2023  润新知