layer子层给父层页面元素赋值,以达到向父层页面

网络编程 2025-04-04 11:21www.168986.cn编程入门

SEO优化实践分享:如何利用Layer子层向父层页面传值

亲爱的读者们,今天我要分享一个实用的网络技巧。你是否曾想过在Layer子层中向父层页面直接传递值呢?长沙网络推广带您了解一个生动实例,让我们共同这一技巧。

让我们来看一下父层页面的准备。在JSP页面中,我们需要添加一个隐藏输入框,用于子层设置value值,从而传递数据到此页面。代码如下:

```html

```

接下来,让我们看一下如何通过JS代码实现弹出子窗口并传递当前窗口名称的功能。在子窗口中,我们将使用这个名称来获取父窗口的引用,并向其传递数据。

```javascript

//弹出子窗口(选择商家)

function choseMerchant() {

//获取当前窗口名称

var parentName = window.name;

//URL对应的是controller方法,并向其传递当前窗口名称,打开的窗口显示页面即为经过controller方法后返回的页面

var url = root + "/adPosition/choseMerchant?parentName=" + parentName;

laySum = parent.layer.open({

type: 2, //设置打开的子窗口效果

title: "选择商家",

shadeClose: true, //点击遮罩层关闭窗口

shade: 0.5, //遮罩层透明度

shift: 0, //窗口层级关系,越靠后数值越大(决定显示位置)

area: ['40%', '863px'], //窗口大小设置宽和高为百分比和像素值组合形式,支持自定义样式名(例如:'test')或者直接使用CSS选择器字符串(例如:'test')获取样式定义的对象来设置样式。注意单位不能省略!使用像素作为单位时可以不写单位。注意传入的样式值必须与样式的定义值保持一致。例如:area:'full',表示全屏显示窗口。如果不写单位则默认为像素值。例如:area:'auto',则会自动匹配外部容器的宽度和高度的实际尺寸进行等比例缩放。这里传入的字符串也可以为自定义样式名或者CSS选择器字符串。如果传入的是字符串类型,则必须包含单位(如px)。如果传入的是数字类型,则默认单位为像素(px)。这里设置宽度为占屏幕宽度的百分之四十。高度设置为固定的像素值(可自定义)。如果只设置一个值则另一个默认为auto自动调整高度。这里设置高度为863px。内容设置为url地址路径。suess回调函数中为空函数体,可以根据需要添加逻辑处理代码。当弹出层渲染完毕后执行回调函数中代码块中的逻辑处理代码。当弹出层渲染完毕后,可以执行回调函数中的代码块进行逻辑处理操作。比如给弹出层添加按钮等交互元素等操作可以在这里完成。弹出子窗口后等待用户操作并传递数据回父窗口。

});

}

```

接下来是子层的准备。在子层的JSP页面中,我们添加一个隐藏输入框来存储经过controller方法后返回的父窗口名称,用于区分不同的父窗口。代码如下:

```html

``` 接着在子层的JS代码中设置一个函数来传递值并关闭当前窗口。这个函数首先获取隐藏输入框中的值,然后判断这个值是否为空或者未定义。如果满足条件,就设置父窗口对应输入框的值为“hello world”,然后关闭当前窗口。代码如下:

```javascript

function setvalue() {

//得到“mainIframeName”输入框中存储的值

var mainIframeName = $("mainIframeName").val();

//判断是否为空或者是未定义

if (mainIframeName != "" && mainIframeName != "undefined") {

//此处的ifrc和winc的意义可自行查阅 用来获取父窗口的引用对象 以便操作父窗口的元素 可以通过window对象或者iframe对象来获取父窗口的引用对象 具体取决于你的页面结构 这里假设通过iframe获取父窗口的引用对象 并通过try-catch来处理可能出现的错误情况 因为可能存在跨域访问的问题导致无法直接操作父窗口的元素 所以需要进行错误处理 如果出现错误则刷新父窗口页面 或者其他处理方式都可以 根据实际情况来决定如何处理错误情况 这里是通过刷新父窗口页面来处理错误情况 当出现错误时刷新父窗口页面 重试一次操作即可解决大部分问题 因为刷新页面后iframe引用的父窗口对象会重新获取 避免了一些未知错误的发生 所以这里采用刷新页面的方式处理异常情况以确保能够成功操作父窗口的元素 这里设置了父窗口隐藏输入框的值为hello world!实现了向父层页面传值的效果 关键点在于需要将父层窗口名称传递到子层中以区分不同的父窗口实例 设置完值后关闭当前子层

上一篇:vue eslint简要配置教程详解 下一篇:没有了

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by