用iframe 进行局部刷新--(子页面,父页面变量和函数互相调用)

(1)主页面(包含iframe)的初始化

          <iframe id="myFrameId"></iframe> 

           $("#myFrameId").attr("src", APP_PATH+'/adjustaccount/adjustInfo?account_period=201412');
});

(2)主页面上(包含iframe)的查询按钮

function query(){

              <iframe id="myFrameId"></iframe> 

             $("#myFrameId").attr("src", APP_PATH+'/adjustaccount/adjustInfo?account_period=201411');    

             //可以实现局部刷新-----只刷新iframe内容,主页面上其他内容不刷新。

}


(3) 子页面iframe上获取父页面元素 ------- jQuery window对象属性:parent:返回父窗口

       在子页面iframe上写如下代码: 

var year =parent.$("#year_m").val();
 var month=parent.$("#month_m").val();



(4) 父页面上获取子页面iframe上的元素 -------------------- jQuery

<iframe id="myFrameId"></iframe> 

 在父页面上写如下代码:

$('#myFrameId').contents().find('#student_name').text();     --父页面获取子页面iframe上的属性student_name的文本值


 (5)

1、HTML语法:<iframe name="myFrame"></iframe>

2、父窗口调用子窗口函数:myFrame.window.functionName();

3、子窗品调用父窗口:parent.functionName();

简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行


要在页面调用页面的方法和变量,可以使用以下几种方式: 1. 使用iframe.contentWindow属性获取页面的window对象,然后调用该对象的方法或访问该对象的属性。 例如,假设iframe的id为"myFrame",页面中有一个名为"myFunction"的方法和一个名为"myVariable"的变量,可以使用以下代码来调用它们: ```javascript var iframe = document.getElementById("myFrame"); var childWindow = iframe.contentWindow; childWindow.myFunction(); var myValue = childWindow.myVariable; ``` 2. 在页面中定义一个全局变量函数,并在页面中通过iframe对象的contentWindow属性访问它们。 例如,页面中定义了一个名为"myFunction"的全局函数和一个名为"myVariable"的全局变量,可以使用以下代码在页面中访问它们: ```javascript var iframe = document.getElementById("myFrame"); var childWindow = iframe.contentWindow; childWindow.myFunction(); var myValue = childWindow.myVariable; ``` 3. 在页面中使用postMessage API向页面发送消息,并在页面中监听该消息,并根据消息内容执行相应的操作。 例如,在页面中发送消息: ```javascript var iframe = document.getElementById("myFrame"); var childWindow = iframe.contentWindow; childWindow.postMessage("hello", "http://example.com"); ``` 在页面中监听消息: ```javascript window.addEventListener("message", function(event) { if (event.origin == "http://example.com" && event.data == "hello") { // 执行相应的操作 } }); ``` 需要注意的是,在使用postMessage API时需要注意安全性,防止被恶意代码利用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值