65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 postMessage 将数据发送到另一个域

Sibeesh Passion
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.76/5 (4投票s)

2016年2月3日

CPOL

3分钟阅读

viewsIcon

13635

在这篇文章中，我们将了解如何从我们的应用程序向另一个域发送数据。

在这篇文章中，我们将了解如何从我们的应用程序向另一个域发送数据。你可以简单地称之为跨域数据共享。在某些情况下，我们可能需要发送一些数据，这些数据对于我们的其他域或应用程序按预期工作是必需的。我在我的编程生涯中遇到过一些这样的情况。我使用 postMessage 方法完成了这个需求。window.postMessage 方法帮助我们启用跨域通信。希望你喜欢这篇文章。

背景

我被迫在我的第二个应用程序中每次维护一些 cookie。而且，我希望从我的第一个应用程序设置相同的 cookie。因此，我使用 window.postMessage 实现了这一点。为了演示目的，我在这里创建两个应用程序

  • CrossDomainDataSharing
  • Receiver

Using the Code

首先，我们将专注于 CrossDomainDataSharing 应用程序，在这个应用程序中我们将数据发送到 Receiver 应用程序。

首先，你需要将 jQuery 引用添加到你的页面。为了使这个应用程序更时尚，我添加了 Smart Alert 到我们的应用程序，你可以看到下面所需的引用和样式。

<script src="Scripts/jquery-2.2.0.min.js"></script>
    <script src="js/alert.min.js"></script>
    <link href="css/alert.min.css" rel="stylesheet" />
    <link href="themes/dark/theme.css" rel="stylesheet" />

下一步是“调用窗口加载”函数。

 window.onload = function () {
            document.getElementById('btnSend').addEventListener('click', sendData);
        };

这里，我们只是将一个点击事件添加到 id 为 btnSend 的按钮上。在添加事件之前，请确保你已经创建了一个按钮。

 <button id="btnSend">Send Feedback</button>

下一步是创建一个 iframe 并将我们的第二个应用程序链接加载到其中，通过提供 src 值来实现。

 <iframe id="ifrLoad" 
 src="https://:55592/Receiver/Cross-Domain-Data-Sharing-Receiver.html" 
	style="display: none;">
        <p>Oops!. Your browser does not support iframes.</p>
    </iframe>

你注意到我们调用了一个名为 sendData 的函数。让我们看看这个函数的作用。

function sendData(e) {
            try {
                $.alert.open('prompt', 'Please send your feedback!.', function (button, value) {
                    if (button == 'ok') {
                        e.preventDefault();;
                        var myIfr = window.frames['ifrLoad'].contentWindow;
                        myIfr.postMessage(value, 'https://:55592/Receiver/Cross-Domain-Data-Sharing-Receiver.html')
                        $.alert.open('Thank you so much for your feedback.' || 'No value has been entered');
                    }
                });

            } catch (e) {
                console.log('Error: ' + e.message);
            }
        }

我们首先创建一个智能提示，如果用户说“Ok”，我们将使用 postMessage 方法将给定的反馈传递到我们的第二个应用程序。实现非常简单，不是吗？

你可以按照以下方式设置你创建的按钮的样式

<style>
        #btnSend {
            margin-left: 11px;
            border: solid 1px #000;
            padding: 9px 22px 7px;
            min-width: 32px;
            font-weight: bold;
            line-height: 13px;
            color: #fff;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
            background-color: #232323;
            background-image: linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            background-image: -webkit-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            background-image: -moz-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            background-image: -o-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            background-image: -ms-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            -pie-background: linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            -webkit-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            -moz-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            -ms-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            -o-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        }

            #btnSend:hover {
                background-color: #404040;
                background-image: linear-gradient(#515151 1%, #2e2e2e);
                background-image: -webkit-linear-gradient(#515151 1%, #2e2e2e);
                background-image: -moz-linear-gradient(#515151 1%, #2e2e2e);
                background-image: -o-linear-gradient(#515151 1%, #2e2e2e);
                background-image: -ms-linear-gradient(#515151 1%, #2e2e2e);
                -pie-background: linear-gradient(#515151 1%, #2e2e2e);
                box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
                -webkit-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
                -moz-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
                -ms-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
                -o-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            }
    </style>

现在发送部分就完成了，请在这里查看我们的第一个应用程序的完整代码。

<!DOCTYPE html>
<html>
<head>
    <title>Cross Domain Data Sharing Demo - Sibeesh Passion</title>
    <script src="Scripts/jquery-2.2.0.min.js"></script>
    <script src="js/alert.min.js"></script>
    <link href="css/alert.min.css" rel="stylesheet" />
    <link href="themes/dark/theme.css" rel="stylesheet" />
    <style>
        #btnSend {
            margin-left: 11px;
            border: solid 1px #000;
            padding: 9px 22px 7px;
            min-width: 32px;
            font-weight: bold;
            line-height: 13px;
            color: #fff;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
            background-color: #232323;
            background-image: linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            background-image: -webkit-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            background-image: -moz-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            background-image: -o-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            background-image: -ms-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            -pie-background: linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            -webkit-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            -moz-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            -ms-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            -o-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
            0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        }

            #btnSend:hover {
                background-color: #404040;
                background-image: linear-gradient(#515151 1%, #2e2e2e);
                background-image: -webkit-linear-gradient(#515151 1%, #2e2e2e);
                background-image: -moz-linear-gradient(#515151 1%, #2e2e2e);
                background-image: -o-linear-gradient(#515151 1%, #2e2e2e);
                background-image: -ms-linear-gradient(#515151 1%, #2e2e2e);
                -pie-background: linear-gradient(#515151 1%, #2e2e2e);
                box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
                -webkit-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
                -moz-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
                -ms-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
                -o-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 
                0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            }
    </style>
    <script>
        window.onload = function () {
            document.getElementById('btnSend').addEventListener('click', sendData);
        };
        function sendData(e) {
            try {
                $.alert.open('prompt', 
                'Please send your feedback!.', function (button, value) {
                    if (button == 'ok') {
                        e.preventDefault();;
                        var myIfr = window.frames['ifrLoad'].contentWindow;
                        myIfr.postMessage(value, 
                        'https://:55592/Receiver/Cross-Domain-Data-Sharing-Receiver.html')
                        $.alert.open('Thank you so much for your feedback.' || 
                        'No value has been entered');
                    }
                });

            } catch (e) {
                console.log('Error: ' + e.message);
            }
        }
    </script>
</head>
<body>
    <button id="btnSend">Send Feedback</button>
    <iframe id="ifrLoad" 
    src="https://:55592/Receiver/Cross-Domain-Data-Sharing-Receiver.html" 
    style="display: none;">
        <p>Oops!. Your browser does not support iframes.</p>
    </iframe>
</body>
</html>

现在我们将专注于我们的第二个应用程序 ‘Receiver’。

我们将添加一个 window load 函数，并带有事件监听器，该监听器接受来自我们第一个应用程序的数据。请参阅以下代码以获取更多说明。

 $(window).load(function () {
            window.addEventListener('message', addData);
            function addData(e) {
                document.cookie = "myData=" + e.data;
            };
        });

这里，myData 是 cookie 的名称。

你可以在这里查看我们的第二个应用程序的完整代码。

<!DOCTYPE html>
<html>
<head>
    <title>Cross Domain Data Sharing Receiver - Sibeesh Passion</title>
    <script src="Scripts/jquery-2.2.0.min.js"></script>
    <script>
        $(window).load(function () {
            window.addEventListener('message', addData);
            function addData(e) {
                document.cookie = "myData=" + e.data;
            };
        });
    </script>
</head>
<body>
</body>
</html>

现在是时候查看我们的输出了。

输出

在将数据发送到我们的第二个应用程序时。

Cross_Domain_Data_Sharing_Sender

Cross_Domain_Data_Sharing_Sender

Smart_Alert

Smart_Alert

在我们的第二个应用程序中接收数据时。

Receiving_data_from_another_domain

Receiving_data_from_another_domain

就这样。我们完成了。祝你编码愉快。

结论

我是否遗漏了你认为需要的任何内容？你是否曾经想过做这个需求？你觉得这篇文章有用吗？希望你喜欢这篇文章。请与我分享你宝贵的建议和反馈。

现在轮到你了。你有什么想法？

没有评论的博客不是一个博客，但请尽量保持主题相关。如果你有一个与这篇文章无关的问题，最好在 C# Corner、Code Project、Stack Overflow、ASP.NET 论坛上发布，而不是在这里评论。将问题的链接推特或发邮件给我，如果我能帮助你，我一定会尽力而为。

© . All rights reserved.