前端iframe子页面与父页面通信问题

最新推荐文章于 2024-04-28 19:21:12 发布
最新推荐文章于 2024-04-28 19:21:12 发布
阅读量564 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webpetter/article/details/89491897
版权

一个index.html,一个iframe.html,但是要注意，html文件必须放到服务器下访问，file协议下无法生效的。

1.普通需求：只需要子页面获取父页面元素

window.parent或者参考window.iframe用法，比较简单

2.霸气需求，drag拖动跨ifame（老式的mousedown + mousemove + mouseup模拟的drag事件无法实现）

这里借助HTML5中的drag and drop API

index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="/pfl/vendor/jquery.min.js"></script>
    <style>
    .trash{
        padding: 10px;
        height: 100px;
        background: #BCDAFA;
        border: 2px solid #8C96FF;
        font-size: 60px;
        line-height: 100px;
    }
    .trash.hover{
        background: #FFFFAB;
        border: 2px dashed red;
        color: red;
    }
    #iframe{width:100%;height:450px;}
    </style>
</head>
<body&g
最低0.47元/天 解锁文章
SkypeWang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Iframe中跨域进行父子窗口进行通信的四种方法
cw_hello1的专栏
11-26 1万+
本篇文章主要介绍父子页面DOM操作造成的跨域问题。
iframe之父子页面通信
yiyueqinghui的博客
08-05 7862
1、获取 子页面 的 window 对象 获取 子页面 的 window 对象 ，即获取了子页面的所有变量和方法，获取方法如下： // iframe id document.getElementById('menuIframe').contentWindow // iframe name window.frames['menuIframe'].window // iframe index 当前窗体的第几个 iframe window.frames[1].window 2、子 iframe 获取 父
iframe父子页面通信
最新发布
大雾起了清晨
04-28 737
目录 一、 创建父页面和子页面父页面（parent.html）：子页面（child.html）：二、 实现父子页面之间的通信在父页面的 标签中：在子页面的 标签中：三、扩展：postMessage() 方法的语法：首先，我们需要创建一个包含 iframe 的父页面和一个子页面，在父页面中嵌套子页面并实现它们之间的通信。 子页面（child.html）： 二、 实现父子页面之间的通信 在父页面和子页面中，我们可以通过 postMessage 方法来实现跨域通信。以下是一个简单的例子： 在
解决iframe跨域跟父级进行通讯问题【postMessage】 重点是跨域进行通讯！
耶稣与梦的博客
01-23 5417
解决iframe跨域跟父级进行通讯问题【使用postMessage】 重点是跨域进行通讯！ 前言 iframe跟父级如果同源，iframe中可以通过window.parent对父级进行任意操作，例如：操作Dom、触发父级事件等，但父级跟iframe地址不同源(简单说明下，不同源是两个url地址所处域名不同或端口号不同，都会导致不同源)，此时如果我们通过window.parent去操作父级方法或者dom，游览器会因跨源导致报错// Uncaught DOMException: Block...
Iframe父页面子页面通信
weixin_42333548的博客
09-30 2754
iframe子页面与父页面通信方案 一：父页面（调用iframe的页面） 第一步：页面中引入iframe <iframe id="PanIframe" ref={iframeRef} frameBorder={0} width={960} height={600} marginHeight={0} scrolling="no" sr
js子页面调用父页面方法与父页面调用子页方法
热门推荐
weixin_44512123的博客
08-17 3万+
在做项目中都会存有主页面子页面。子页面嵌套中主页面中，主页面有主的方法，子页面有字面的方法，通常的方法是点击主页面选项打开子页面。但是我这里我要从子页面就是房态图，因为主页面和房态中有一些方法是相同，就是说从房态图中打开模态框，同时也可以从主页面打开这个模态框。也是说我这次的问题是如何从主页面中调用子页面中的方法?就想下图所示嘛，模态框已经在房态图中实现了，打开是同样的模态框总不会在主...
在vue中实现嵌套页面(iframe)
10-15
`iframe`页面中的网络请求通常与Vue层的通信是独立的。如果`iframe`需要从Vue父页面获取数据，可以通过传递URL参数或者使用`postMessage` API来实现跨窗口通信。以下是一个简单的请求示例： ```javascript function...
iframe与父页面传值
03-19
在进行父子页面通信时，必须注意安全问题。`postMessage`提供了验证`origin`的能力，以防止恶意页面注入数据。同时，由于浏览器的同源策略，跨域通信需要处理跨域资源共享（CORS）设置。 四、应用场景 - 内容嵌入：...
html判断当前页面是否在iframe中的实例
09-01
3. **交互逻辑**：在`iframe`内可能需要与父页面进行通信，例如通过`postMessage` API传递数据。 4. **安全考虑**：防止XSS（跨站脚本攻击）和其他安全风险，因为`iframe`可能被用于恶意注入代码。 总结，通过检查`...
创建子窗口与子父窗口间通信
04-22
在IT领域，创建子窗口与子父窗口间的通信是一个重要的技术话题，特别是在开发多窗口应用程序或者Web应用时。本文将详细探讨这个主题，并基于提供的标签"源码"和"工具"，以及压缩包中的"DHTML手册.chm"，来解析相关的...
iframe跨域通信封装详解
12-08
然而，为了实现特定的需求，如在一个页面（顶级页面）中嵌入另一个不同源的页面（子页面）并通过JavaScript进行通信，开发者会利用`iframe`来绕过这些限制。本文将详细介绍一种跨域通信的封装方法，帮助理解如何在...
iframe父子页面间通信总结
weixin_30236595的博客
10-09 3761
随着网页结构的复杂化，页面内嵌frame越来越常见，但不管是作为内容页来显示，还是作为组件模块嵌入，都有父子页面间通信的需求可能，因此为了更好的实现需求就必须了解父子页面间的通信。 iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。 同域下父子页面的通信 页面间通信常以页面间调用实现，包括以下几个方面：（调用包含html ...
利用iframe进行父页面和子页面的通信
michael8512的博客
08-17 1499
父页面parent.html: 父页面元素 调用子页面方法 获取子页面元素 调用子页面child1.html的方法，并获取其元素 function parentSay(){ alert('say parent') } function getChildItem(){ var child=document.getElementById('frame1').cont
可视化搭建平台之跨iframe拖拽
大转转FE
02-26 2286
前言前段时间做运营活动搭建平台，其中一个主要功能：编辑页面分为左侧-组件区与右侧-预览区，需要实现组件区的内容可自由放置到预览区内。类似下图所示：社区内有一些类似的功能实现，但使用的方式大...
iframe页面使用Js实现父页面和子页面通信
HELLO WORLD
10-04 878
iframe 元素 <iframe>元素遵守同源政策，只有当父窗口与子窗口在同一个域时，两者之间才可以用脚本通信。 document.getElementById 对于iframe嵌入的窗口，document.getElementById方法可以拿到该窗口的 DOM 节点，然后使用contentWindow属性获得iframe节点包含的window对象。 var iframe =...
iframe 通信和跨域通信
starwmx520的博客
06-06 7609
几年前页面里使用iframe嵌套使用的还是很多的。 以下是多种使用方法： 1、同域下嵌套： 父页面： window.onload=function(){ //父页面修改iframe var docu=document.querySelector('#iframe2'); docu.contentWindow.document.querySelector('#div
JavaScript：iframe子页面和父页面域内及跨域通信示例
快去创造奇迹
09-10 3866
iframe子页面与父页面通信
前端如何用代理页面解决iframe跨域访问的问题
05-01
当前端页面中嵌入了来自其他域名的 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、付费专栏及课程。

余额充值