JS篇(022)-iframe 跨域通信和不跨域通信

一时失言乱红尘 2023-01-05 03:54 191阅读 0赞

答案：

### 不跨域通信 ###

主页面

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    
    <body>
        <iframe name="myIframe" id="iframe" class="" src="flexible.html" width="500px" height="500px">
        </iframe>
    </body>
    <script type="text/javascript" charset="utf-8"> function fullscreen() { alert(1111); } </script>
    
    </html>

子页面 flexible. html

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    
    <body>
        我是子页面
    </body>
    <script type="text/javascript" charset="utf-8"> // window.parent.fullScreens() function showalert() { alert(222); } </script>
    
    </html>

1、主页面要是想要调取子页面的 showalert 方法

myIframe.window.showalert();

2、子页面要掉主页面的 fullscreen 方法

window.parent.fullScreens();

3、js 在 iframe 子页面获取父页面元素:

window.parent.document.getElementById("元素id");

4、js 在父页面获取 iframe 子页面元素代码如下:

window.frames["iframe_ID"].document.getElementById("元素id");

### 跨域通信 ###

使用[postMessage(官方用法）][postMessage]

子页面

window.parent.postMessage("hello", "http://127.0.0.1:8089");

父页面接收

window.addEventListener("message", function(event) { 
        alert(123);
    });

解析：

[参与互动][Link 1]

[postMessage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
[Link 1]: https://github.com/yisainan/web-interview/issues/191

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关前端跨域通信--【iframe上篇】

需求：在内部的业务中，通过iframe引用了外部业务，当执行外部业务是，内部业务停止或禁用（仅可查看模式）,这里外部业务执行完毕会发出通知，这里我们需要依据这个通知进行处

你的名字/ 2023年02月13日 14:47/ 0 赞/ 52 阅读

相关 iframe解决跨域

在父页面中写入iframe标签，其中src值为需要跨域访问的页面地址`<iframe ref="iframe" src="http://xxx/index.html" name

雨点打透心脏的1/2处/ 2023年01月23日 05:55/ 0 赞/ 26 阅读

相关 JS篇(022)-iframe 跨域通信和不跨域通信

答案：不跨域通信主页面 <!DOCTYPE html> <html> <head> <meta charset=

一时失言乱红尘/ 2023年01月05日 03:54/ 0 赞/ 192 阅读

相关 iframe + postMessage 实现跨域通信

VScode安装Live Server 插件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

客官°小女子只卖身不卖艺/ 2022年12月25日 02:57/ 0 赞/ 198 阅读

相关 iframe跨域访问

js跨域是个讨论很多的话题。iframe跨域访问也被研究的很透了。一般分两种情况：一、是同主域下面，不同子域之间的跨域；　　同主域，不同子域跨域，设置相同的doc

悠悠/ 2022年08月10日 12:57/ 0 赞/ 296 阅读

相关 JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的[框架][Link 1]中(iframe)的数

古城微笑少年丶/ 2022年08月10日 00:48/ 0 赞/ 263 阅读

相关 iframe跨域通信封装详解

iframe跨域通信众所周知，由于前端javascript对跨域访问做了安全限制，javascript只能访问与包含它的文档在同一域下的内容。用法举例：需求是

素颜马尾好姑娘i/ 2022年08月05日 08:19/ 0 赞/ 236 阅读

相关利用iframe实现ajax跨域通信的实现原理(图解)

在漫长的前端开发旅途上，无可避免的会接触到ajax，而且一般情况下都是用在同一域下的ajax请求；但是如果请求是发生在不同的域下，请求就无法执行，并且会抛出异常提示不允许跨域请

落日映苍穹つ/ 2022年08月05日 08:18/ 0 赞/ 191 阅读

相关 iframe跨域

按情境分 1、不跨域时 2、主域相同、子域不同时 3、主域不同 1、不跨域时访问iframe： oIframe.contentWindow 可以直

男娘i/ 2022年05月18日 06:38/ 0 赞/ 306 阅读

相关 JS跨域：jsonp、跨域资源共享、iframe+window.name

JS中的跨域请求跨域有好多种，一、跨域资源共享：也就是设置服务端的header，可以指定哪些域名可以请求，也是最简单的跨域方式（自我感觉），并且可以支持post

た入场券/ 2021年10月25日 12:26/ 0 赞/ 382 阅读