如何在iframe中调用js方法

最新推荐文章于 2024-09-22 08:58:30 发布

转载最新推荐文章于 2024-09-22 08:58:30 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://stackoverflow.com/questions/1600488/calling-javascript-function-in-iframe

文章标签：

#iframe

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种在iframe中发起跨域XMLHttpRequest的方法，通过在iframe内动态创建并执行JavaScript代码来规避浏览器同源策略限制，适用于需要隐私保护场景下的简单GET请求。

转自: https://stackoverflow.com/questions/1600488/calling-javascript-function-in-iframe

亲测可用, 复制如下:

Calling a privacy-respecting `XMLHttpRequest` from an `<iframe>`

HTML:

<iframe id="iframe"></iframe>

JavaScript:

const iframe    = document.getElementById('iframe');
const iframeWin = iframe.contentWindow || iframe;
const iframeDoc = iframe.contentDocument || iframeWin.document;

let script = iframeDoc.createElement('SCRIPT');

script.append(`function sendWithoutOrigin(url) {
    let request = new XMLHttpRequest();

    request.open('GET', url);

    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE) {
            if(request.status === 200) {
                console.log('GET succeeded.');
            }
            else {
                console.warn('GET failed.');
            }
        }
    }
    request.send();
}`);

iframeDoc.documentElement.appendChild(script);

JavaScript evocation:

let url  = 'https://api.serivce.net/';
    url += '?api_key=' + api_write_key;
    url += '&field1=' + value;

iframeWin.sendWithoutOrigin(url);

如何在iframe中调用js方法

Calling a privacy-respecting XMLHttpRequest from an <iframe>

Calling a privacy-respecting `XMLHttpRequest` from an `<iframe>`