`
Abby_success
  • 浏览: 16965 次
  • 性别: Icon_minigender_2
  • 来自: 重庆
社区版块
存档分类
最新评论

父页面与子页面之间调用时通过JS传值

阅读更多

今天遇见一个问题,在一个页面的JS方法里调用另外一个页面,之后将新页面得到的值传回调用页面的问题,采用以下方式实现,具体实现:

父页面a.html:

<script>

 

     function  getLink(){

 

      window.open("b.html","newindow","width=100,height=200,toolbar=no,scrollbars=no");

}

 

function  getNewLinkValue(value){

 

  alert(value);//可以得到子页面设的值

}

</script>

<input  type="button"  value="测试子页面调用"  onclick="getLink();"/>

子页面b.html:

<script>

 var wholeValue;

     function  setNewLinkValue(){

        //之前有一个JS方法构造了wholeValue的值

        window.opener.getNewLinkValue(wholeValue);//设置传递给父页面的值

 

      }

</script>

小结:

window.open(url, name, features, replace) ;实现打开一个新窗口

其中:url指的是指向要在新窗口中显示的文档的URL;name该参数用于设置新窗口的名称,但是相同name的窗口只能创建一个,要想创建多个窗口则name不能相同;features用于设置新窗口的设置(如:显示宽高等信息);replace 指可选布尔参数,设置新窗口中的操作历史的保存方式,其中true 指创建新历史记录,false指替换旧的历史记录。
而window.opener只是对弹出窗口的母窗口的一个引用,指调用window.open方法的窗口;可以利用window.opener.location.reload();实现刷新父页面的功能;

在此也了解了window.opener与window.parent的区别:

window.parent能获取一个框架的父窗口或父框架。顶层窗口的parent引用的是它本身。(通常在使用ifream调用或者location.href调用时可以使用此)

window.opener引用的是window.open打开的页面的父页面,当一个窗口用open方法打开了一个新窗口的时候,opener属性就生效;


 

分享到:
评论

相关推荐

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    综上所述,EasyUI弹出窗口的传值与调用父页面方法涉及到前端页面交互的基本技术,理解并熟练掌握这些技巧对于前端开发者来说至关重要。通过正确使用这些方法,可以有效地实现页面间的数据流动和功能协同,提升用户...

    JavaScript实现在页面间传值的方法

    通过script标签引用外部JavaScript文件myjs.js,可以在其中编写可复用的函数,这样做能够提高代码的可维护性和可扩展性。 在b.html页面中,为了获取传递的参数值,使用了JavaScript代码来解析window.location....

    iframe与父页面传值(方法互调)

    然而,当涉及到`iframe`与父页面之间的通信时,就需要用到一些特殊的方法来实现数据的传递和函数调用。本篇文章将深入探讨如何在`iframe`与父页面之间进行值的传递以及方法的互相调用。 首先,我们可以通过...

    JS父页面与子页面相互传值方法

    在多页面应用或者嵌入式框架(如iframe)中,经常需要进行父页面与子页面之间的数据交换。下面将详细介绍如何在不同场景下使用JS实现这种传值。 一、子页面是父页面通过`window.open`弹出的情况 当子页面是通过`...

    iframe子父页面调用js函数示例.docx

    "iframe子父页面调用js函数示例" 在实际项目中,iframe 子父页面调用 js 函数是非常有用的。下面是一个示例,演示如何在 iframe 子页面中调用父页面的 js 函数,以及如何在父页面中调用 iframe 子页面的 js 函数。 ...

    子父窗口传值

    - 事件触发:与子窗口向父窗口传值类似,父窗口也可以通过触发事件来传递数据给子窗口。 3. **FineUI中的子父窗口交互** - FineUI 提供了`OpenWindow`方法来创建子窗口,并且支持在打开子窗口时传递参数,这些...

    swift 与 javascript 之间的相互调用及传值

    Swift与JavaScript之间的相互调用和传值是实现跨平台交互的关键技术。通过WKWebView组件,开发者能够在iOS应用中无缝集成JavaScript功能,实现动态内容加载、网页交互等功能。同时,通过WKUserContentController和...

    子窗口传值到父窗口.rar

    在Web开发中,有时我们需要在子窗口与父窗口之间传递数据。这通常发生在弹出窗口或者框架集等场景中,用户在子窗口进行操作后,需要将结果反馈给父窗口,以便更新父窗口的状态或展示相关信息。这个过程就称为“子...

    javascript 父窗口、子窗口传值问题

    在JavaScript编程中,父窗口与子窗口之间的通信是一种常见的需求,特别是在构建多窗口应用程序或弹出窗口时。本文将深入探讨如何在JavaScript中实现父窗口与子窗口之间的数据传递。 首先,我们需要理解“父窗口”和...

    WEB页面传值

    页面传值有多种方法,包括JavaScript传值、ASP.NET页面传值、后台访问JS变量、JS调用后台函数和后台调用JS函数等。 一、JavaScript传值 JavaScript传值是指在页面之间使用JavaScript脚本来传递数据的方法。有一种...

    iframe父向子传值实例.rar

    然而,由于浏览器的同源策略限制,`iframe`内的页面与包含它的父页面在不同源时,不能直接访问彼此的DOM或JavaScript变量,这就引出了"iframe父向子传值"的问题。 在标题"iframe父向值实例.rar"和描述中提到的解决...

    javascript页面之间传值

    在JavaScript编程中,页面间传值是一个常见的需求,特别是在构建多窗口或框架的应用时。本实例将探讨如何在父窗口与子窗口之间有效地传递数据,以及两种实现这一目标的方法。 第一种方法是通过`window.open()`函数...

    在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    在Layui框架中,使用表格模板与layer弹层组件进行父页面和子页面之间的传值交互是一项常见的需求。Layui是一个轻量级的前端UI库,其layer模块提供了丰富的弹窗功能,包括对话框、提示、加载层等,非常适合用于构建...

    微信小程序中子页面向父页面传值实例详解

    在微信小程序中,子页面与父页面之间的通信是开发过程中常见的需求。本实例将详细讲解如何在微信小程序中实现子页面向父页面传递值的方法,主要涉及到页面路由、API调用以及页面对象的操作。 首先,我们需要理解...

    子父窗口传值动态添加行

    在IT开发中,子父窗口之间的通信是一种常见的需求,特别是在构建多窗口或模块化应用时。这个场景下,"子父窗口传值--动态添加行"涉及到的技术点主要是JavaScript中的跨窗口通信以及DOM操作,主要应用于Web应用的交互...

    三级页面传值..

    这通常适用于父页面能够控制子页面的创建和销毁的情况。 2. 事件冒泡:如果一级页面是顶级窗口,可以通过事件冒泡机制,由三级页面触发一个事件,一级页面监听并处理这个事件,从而获取数据。 3. 利用History API...

    .NET中利用js让子窗体向父页面传值的实现方法.docx

    总结一下,.NET中利用JavaScript实现子窗体向父页面传值的步骤如下: 1. 在子页面C#后台中,创建一个方法,如`SetValueToParentPage`,生成JavaScript代码,将需要传递的值赋给`window.returnValue`,并关闭子窗口...

    JS中Iframe之间传值及子页面与父页面应用

    本文将深入探讨如何在JS中进行`&lt;iframe&gt;`间的值传递以及子页面与父页面的交互。 首先,让我们理解如何在子页面中获取父页面的元素或方法: 1. 获取父页面的元素: - 使用 `window.parent.document` 可以访问父...

    无刷新 子窗体传值父窗体

    在IT行业中,尤其是在Web开发领域,"无刷新子窗体传值父窗体"是一个常见的需求,它涉及到页面间通信和用户体验优化。无刷新技术可以让用户在不重新加载整个页面的情况下更新部分页面内容,提高交互性和效率。在这个...

    页面传值js文件jquery.params.js

    在网页开发中,数据传递是不可或缺的一环,尤其是在多个页面之间进行交互时。"页面传值js文件jquery.params.js" 提供了一种解决方案,利用JavaScript的jQuery库来简化这一过程。这个JavaScript文件主要实现了从URL...

Global site tag (gtag.js) - Google Analytics