window.postMessage 在 Azure Web App 中失败且没有错误消息

Question

我有一个 .NET 4.8 项目，主窗口内有一个 iframe。我们使用 window.postMessage 以便框架可以在加载特定页面时最小化侧边栏。

这在我们本地数据中心托管时工作得很好，但在 Azure 上则不行。我们迁移到 Azure 并让项目在应用服务中运行。

有人知道从哪里开始弄清楚为什么会被阻止吗？

我在控制台中没有收到任何错误消息，也没有找到任何日志表明此操作被 CORS、防火墙或应用程序网关阻止。

这是调用关闭侧边栏和事件监听器的代码：

window.postMessage("<name of function>", window.document.referrer);

$window.on("<name of function>", _bind(this.<name of function>, this));

我尝试了以下方法但没有成功：

window.postMessage("<name of function>", window.location.origin);

localStorage.setItem('customEvent', '<name of script>');

const parentWindow = window.parent;
parentWindow.postMessage("<name function>", window.location.origin);

我还尝试在 Startup.cs 文件以及 web.config 中添加自定义标头，但没有成功。

谢谢！

Answer 1

我将主页中带有 iframe 的 .net 4.8 Webform 应用程序部署到 Azure 应用服务，并且成功了。

我使用以下代码来发送消息并最小化侧边栏。

默认.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication20.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Main Page</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            overflow: hidden;
        }
        .sidebar {
            width: 250px;
            background-color: #111;
            padding-top: 20px;
            color: white;
            transition: 0.5s;
            z-index: 1;
        }
        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
        .sidebar a:hover {
            color: #f1f1f1;
        }
        .sidebar h2 {
            text-align: center;
            transition: 0.5s;
            margin: 0;
        }
        .sidebar p {
            text-align: center;
            color: #818181;
            margin-top: 10px;
            transition: 0.5s;
            margin: 0;
        }
        #content {
            flex: 1;
            overflow: hidden;
            padding: 20px;
            transition: margin-left 0.5s;
            position: relative;
        }
        iframe {
            width: 50%;
            height: 50%;
            display: block;
        }
        button {
            bottom: 5px;
            right: 5px;
            margin: 5px;
            padding: 5px 10px; 
            font-size: 20px;
        }
        #messageOverlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2;
        }
        #messageContainer {
            background: white;
            padding: 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <h2>Sidebar Content</h2>
        <p>This is your sidebar content.</p>
    </div>

    <div id="content">
        <iframe id="myIframe" src="PageInIframe.aspx" onload="iframeLoaded()"></iframe>
        <div id="messageOverlay">
            <div id="messageContainer"></div>
        </div>
    </div>
    <script>
        var sidebarMinimized = false;
        function toggleSidebar() {
            if (sidebarMinimized) {
                maximizeSidebar();
            } else {
                minimizeSidebar("Message sent to iframe and sidebar minimized");
            }
        }
        function minimizeSidebar(message) {
            var sidebar = document.querySelector('.sidebar');
            var sidebarHeading = document.querySelector('.sidebar h2');
            var sidebarContent = document.querySelector('.sidebar p');
            var messageContainer = document.getElementById('messageContainer');
            var messageOverlay = document.getElementById('messageOverlay');
            var iframe = document.getElementById('myIframe');
            sidebar.style.width = "5px"; 
            sidebarHeading.style.opacity = "0";
            sidebarContent.style.opacity = "0";
            var content = document.getElementById('content');
            content.style.marginLeft = "5px"; 
            messageContainer.innerHTML = "<h2>" + message + "</h2>";
            messageOverlay.style.display = "flex";
            iframe.contentWindow.onload = function () {
                iframe.contentDocument.body.innerHTML = "<h2>" + message + "</h2>";
            };
            sidebarMinimized = true;
        }
        function maximizeSidebar() {
            var sidebar = document.querySelector('.sidebar');
            var sidebarHeading = document.querySelector('.sidebar h2');
            var sidebarContent = document.querySelector('.sidebar p');
            var messageOverlay = document.getElementById('messageOverlay');
            var iframe = document.getElementById('myIframe');
            sidebar.style.width = "250px"; 
            sidebarHeading.style.opacity = "1";
            sidebarContent.style.opacity = "1";
            var content = document.getElementById('content');
            content.style.marginLeft = "250px";
            iframe.contentWindow.restoreOriginalContent();
            messageOverlay.style.display = "none";
            sidebarMinimized = false;
        }
        function iframeLoaded() {
           console.log("Iframe loaded!");
        }
    </script> 
    <button onclick="toggleSidebar()">Toggle Button</button>
</body>
</html>

PageInIframe.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageInIframe.aspx.cs" Inherits="WebApplication20.PageInIframe" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page Inside Iframe</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        button {
            margin: 10px;
        }
    </style>
</head>
<body>
    <h2>This is a page inside the iframe</h2>
    <script>
        var originalContent = document.body.innerHTML;
        function sendMessageAndToggleSidebar() {
            var parentWindow = window.parent;
            if (parentWindow) {
                parentWindow.postMessage("ToggleSidebar", '*');
            }
        }
        function restoreOriginalContent() {
            document.body.innerHTML = originalContent;
        }
    </script>
</body>
</html>

本地输出：

enter image description here