iframe中页面跨域访问javascript

若一个HTML页面A中使用iframe框架嵌套了一个页面B,那么如何让页面B传递参数给页面A呢?

今天有个同事说页面A的批量删除按钮,不能去删除页面B的列表里选中的多条数据。我向怎么可能呢,凡事无绝对,回想了一下自己以前在项目中的经验,想到了可以在iframe中实现跨页面访问javascript的方法。写下来以备忘!

例如:

页面A 里面定义javascript的函数

function tip(info){ alert(info+",传值成功了!"); }

<iframe style="background-color: red;"src="${pageContext.request.contextPath }/B.jsp" scrolling="auto" name="bottomFrame" width="100%" height="100%" frameborder="0" style="color: red"> </iframe>



页面B里面有一个按钮和javascript函数

function postParams(){ alert("开始传递数据..."); window.parent.tip("我是mr_cheney"); }


<input type="button" οnclick="postParams()" />


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当前端页面嵌入了来自其他域名的 iframe 时,由于浏览器的同源策略,iframe 页面无法直接访问页面的 DOM,也无法与父页面进行通信。为了解决这个问题,可以通过代理页面来实现跨域访问。 具体实现步骤如下: 1. 在同域名下创建一个代理页面,例如 proxy.html。 2. 在代理页面使用 JavaScript 代码获取 iframe 页面的内容,并将其渲染到代理页面。 3. 配置代理页面的服务端,使其能够将获取到的 iframe 页面内容返回给前端页面。 4. 在前端页面嵌入代理页面,并通过代理页面的 URL 来访问 iframe 的内容。 示例代码: proxy.html ```html <html> <head> <script> window.onload = function() { var iframe = document.createElement("iframe"); iframe.src = "http://otherdomain.com/page.html"; // 要访问iframe 页面 URL document.body.appendChild(iframe); iframe.onload = function() { var iframeDoc = iframe.contentWindow.document; var iframeContent = iframeDoc.documentElement.innerHTML; // 获取 iframe 页面内容 document.documentElement.innerHTML = iframeContent; // 渲染 iframe 页面内容到代理页面 }; }; </script> </head> <body></body> </html> ``` 服务端代码(Node.js): ```javascript const http = require("http"); const request = require("request"); http .createServer((req, res) => { const url = "http://otherdomain.com/page.html"; // 要访问iframe 页面 URL request(url, (error, response, body) => { if (!error && response.statusCode === 200) { res.writeHead(200, { "Content-Type": "text/html" }); res.end(body); // 将获取到的 iframe 页面内容返回给前端页面 } }); }) .listen(8080); ``` 在前端页面嵌入代理页面: ```html <iframe src="http://localhost:8080/proxy.html"></iframe> <!-- 代理页面 URL --> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值