iframe を介してドメイン間で他のページと通信する 4 つの方法

ロケーション.ハッシュ

URLではlocation.hashとhttp://www.baidu.com#hellowordなっ#helloworadており、ハッシュ値を変更してもページが更新されないため、ハッシュ値を利用してデータを転送することはもちろん、データ量には制限があります。localhost:8081 配下の cs2.html でメッセージを送信するためのファイル cs1.html が localhost:8080 配下にあるとすると、cs1.html は最初に非表示の iframe を作成し、iframe の src は localhost:8081/cs2.html を指し、この時のハッシュ値とパラメータの受け渡しができます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS1</title>
</head>
<body>
    <script>
    // http://localhost:8080/cs1.html
    let ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    ifr.src = "http://localhost:8081/cs2.html#data";
    document.body.appendChild(ifr);
        
    function checkHash() {
        try {
        //去掉?
        let data = location.hash ? location.hash.substring(1) : ' ';
        console.log('获得到的数据是：', data);
        }catch(e) {

        }
    }
    window.addEventListener('hashchange', function(e) {
        console.log('获得的数据是：', location.hash.substring(1));
        });
    </script>
</body>
</html>

メッセージを受信した後、cs2.html はデータ送信を実現するために、parent.location.hash 値を使用して cs1.html のハッシュ値を変更します。

</head>
<body>
    <script>
    // http://locahost:8081/cs2.html
    switch(location.hash) {
        case "#data":
        callback();
        break;
    }
    function callback() {
    const data = "some number: 1111"
    try {
        parent.location.hash = data;
    }catch(e) {
        // ie, chrome 下的安全机制无法修改 parent.location.hash
        // 所以要利用一个中间的代理 iframe 
        var ifrproxy = document.createElement('iframe');
        ifrproxy.style.display = 'none';
        ifrproxy.src = 'http://localhost:8080/cs3.html#' + data;     // 该文件在请求域名的域下
        document.body.appendChild(ifrproxy);
        }
       }
    </script>
</body>
</html>

2 つのページは同じドメインに属していないため、ブラウザーは parent.location.hash の値を変更することを許可していないため、localhost:8080 ドメイン名でプロキシ iframe cs3.html ページを使用する必要があります。

<script>
    parent.parent.location.hash = self.location.hash.substring(1)
</script>

サーバーを開く

次に、ブラウザを開いて localhost:8080/cs1.html (8081 ではない) にアクセスすると、取得されたデータが表示されますが、この時点で、ページのハッシュ値が変更されています。

hash の値が変わりました.PNG

欠点:

データは URL で直接公開されます
データの量と種類は限られています

ウィンドウ名

window.name の値 (通常は js コードに表示されます) は通常のグローバル変数ではなく、現在のウィンドウの名前です. 各 iframe にはそれをラップするウィンドウがあり、このウィンドウは iframe の子ウィンドウであることに注意してください一番上の window であり、もちろん window.name のプロパティも持っています. window.name プロパティの魔法は、別のページ (別のドメイン名であっても) をロードした後も name 値が存在することです (値が変更されていない場合、値は変更されません)。非常に長い名前の値 (2MB) をサポートできます。簡単な例: 特定のページのコンソールに次のように入力します。

window.name = "hello world"
window.location = "http://www.baidu.com"

ページは Baidu のホームページにジャンプしますが、window.name は保存され、Hello world のままです。

最初に a.html ファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    let data = '';
    const ifr = document.createElement('iframe');
    ifr.src = "http://localhost:8081/b.html";
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function() {
        ifr.onload = function() {
            data = ifr.contentWindow.name;
        console.log('收到数据:', data);
        }
        ifr.src = "http://localhost:8080/c.html";
    }
    </script>
</body>
</html>

b.html ファイルを再度作成します。

<script>
   window.name = "你想要的数据!";
</script>

http://localhost:8080/a.htmlリモートサーバーからデータを要求する場合http://localhost:8081/b.html、ページの下に新しい iframe を作成し、iframe の src 属性がサーバーアドレスを指し (iframe タグのクロスドメイン機能を使用)、サーバーファイル b.html が設定されます。 window.name 値。

ただし、a.html ページの src とこのページの iframe のソースが同じでない場合、iframe 内で何も操作できないため、iframe の name 値を取得できないため、src を変更する必要があります。 b.html がロードされた後に指す領域. 相同な html ファイル、またはabout:blank成都現時点では、a.html と同じディレクトリに空白の c.html を作成するだけで済みます。src にリダイレクトしない場合、window.name を直接取得するとエラーになります。

投稿メッセージ

postMessage は、HTML5 のクロスドキュメントメッセージングに新たに追加された機能です。現在、Chrome 2.0 以降、Internet Explorer 8.0 以降、Firefox 3.0 以降、Opera 9.6 以降、Safari 4.0 以降のすべてがこの機能をサポートしています。

最初に .html ファイルを作成します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <iframe src="http://localhost:8081/b.html" style='display: none;'></iframe>
    <script>
    window.onload = function() {
        let targetOrigin = 'http://localhost:8081';
      //想要操作当前iframe的时候，就像该ifranme中postMessage()一个东西。
        window.frames[0].postMessage('我要给你发消息了!', targetOrigin);
        //*表示任何域都可以监听。
    }
      //当我监听到message事件的时候，我就知道有人向我发送数据了，我获得了数据就可以做对应的事情。内部对消息做实现
    window.addEventListener('message', function(e) {
        console.log('a.html 接收到的消息:', e.data);
    });
    </script>
</body>
</html>

iframe を作成し、iframe のメソッド postMessage を使用してhttp://localhost:8081/b.htmlメッセージを送信し、メッセージをリッスンして他のドキュメントからメッセージを取得します。

同じ b.html ファイル:

<script> 
window.addEventListener('message', function(e) { 
    if(e.source != window.parent) { 
        return; 
    } 
    let data = e.data;
    console.log('b.html 接收到的消息:', data); 
    parent.postMessage('我已经接收到消息了!', e.origin); 
})
</script>

document.domain 降域

メインドメインが同じでサブドメインが異なる場合は、document.domain を設定することで解決できます。具体的な方法は、と 2 つのファイルを別々にhttp://www.example.com/a.html追加http://sub.example.com/b.htmlですdocument.domain = "example.com"。 iframe ウィンドウを制御して対話する. もちろん、この方法ではメインドメインが同じで、第 2 レベルドメイン名が異なる場合しか解決できません. script.example.com のドメインをqq.com、明らかに役に立たないので、ウールの布をテストするにはどうすればよいですか?

テスト方法はもう少し複雑で、ドメイン名マッピングのために nginx をインストールする必要があります. nginx がコンピュータにインストールされていない場合は、最初にインストールしてください: nginx ニュース前提条件: 2 つのドメイン名の背後にあるものは同じです.

最初に a.html ファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    //document.domain让当前的域进行降域，这样二者就可以实现相互操作和访问了。
    document.domain = 'example.com';
    let ifr = document.createElement('iframe');
    ifr.src = 'http://sub.example.com/b.html';
    ifr.style.display = 'none';
    document.body.append(ifr);
    ifr.onload = function() {
        let win = ifr.contentWindow;
        alert(win.data);
    }
    </script>
</body>
</html>

別の b.html ファイルを作成します。

<script>
    document.domain = 'example.com';
    window.data = '传送的数据：1111';
</script>

現時点では、2 つの http サーバーのみが有効になっており、ドメイン名のマッピングは nginx を介して行う必要がありExample Domainます。localhost:8080sub.example.comlocalhost:8081

オペレーティングシステムの下でホストファイルを開きます: mac は/etc/hostsファイル、次を追加します。

127.0.0.1 www.example.com
127.0.0.1 sub.example.com

このように、ブラウザがこれら 2 つの URL を開くと、ローカルサーバーにアクセスします。

次に、nginx: の構成ファイルを開き/usr/local/etc/nginx/nginx.conf、http モジュールを追加します。

server {
    listen 80;
    server_name www.example.com;
    location / {
        proxy_pass http://127.0.0.1:8080/;
    }
}
server {
    listen 80;
    server_name sub.example.com;
    location / {
        proxy_pass http://127.0.0.1:8081/;
    }
}

上記のコードの意味は次のとおりです。ローカルドメイン名にアクセスすると、Example Domainリクエストは localhost:8080 によってプロキシされます。

したがって、この時点でブラウザを開いてアクセスすると、Example Domain実際にはローカルサーバー localhost:8080 にアクセスします。

iFrameからのクロスドメイン転送- HappyVK - 博客园