iframe 跨域通信和不跨域通信

不跨域通信:

主页面


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


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");

跨域通信

使用 post message方法

子页面

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

父页面接收


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

相关阅读:
springboot整合mybatis实现增删改查
计算机毕业设计选题推荐-个人健康微信小程序/安卓APP-项目实战
网络安全学习心得分享~
CS语音键在编程中的应用及相关源代码
Java从入门到精通-流程控制（二）
函数相乘和相除的导数及证明
成都瀚网科技有限公司：抖店平台买家怎么修改评价？
pytorch-09.多分类问题
【LeetCode每日一题】【单调栈】907. 子数组的最小值之和 Java实现
智能穿戴领域，健康鞋步力宝品牌引领新商业模式发展

原文地址：https://blog.csdn.net/tong200617/article/details/134099294