如何給iframe傳遞參數並獲取數據？

一、使用URL傳遞參數

在使用iframe時，我們可以通過在URL中添加參數的方式傳遞數據。接收方可以通過解析URL獲取參數，在展示頁面中根據參數展示相關內容。

    <iframe src="http://example.com/page.html?param1=value1&param2=value2"></iframe>

在接收頁面中，可以通過以下方式獲取參數：

    function getParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURIComponent(r[2]); //使用decodeURIComponent解碼
        return null;
    }

    var param1 = getParam("param1");
    var param2 = getParam("param2");

二、使用postMessage傳遞參數

postMessage是HTML5引入的一種在不同窗口之間傳遞數據的機制。通過在發送方窗口中調用postMessage方法向接收方窗口發送數據，並在接收方窗口中監聽message事件獲取數據。

在發送方窗口中：

    var targetWindow = document.getElementById("my-iframe").contentWindow; //獲取目標window對象
    var message = { param1: "value1", param2: "value2" }; //要傳遞的數據
    targetWindow.postMessage(message, targetDomain); //向目標窗口發送數據

在接收方窗口中：

    window.addEventListener("message", function(event) {
        if (event.origin !== targetDomain) return; //需要校驗來源
        var message = event.data; //獲取數據
        var param1 = message.param1;
        var param2 = message.param2;
    });

三、使用localStorage傳遞參數

localStorage是HTML5引入的本地存儲機制，數據可以在不同窗口中共享。我們可以在發送方窗口中將數據存儲到localStorage中，接收方窗口監聽localStorage的變化，獲取數據後將數據從localStorage中刪除。

在發送方窗口中：

    var message = { param1: "value1", param2: "value2" }; //要傳遞的數據
    localStorage.setItem("message", JSON.stringify(message)); //存儲數據

在接收方窗口中：

    function getMessage() {
        var message = JSON.parse(localStorage.getItem("message")); //獲取數據
        localStorage.removeItem("message"); //刪除數據
        return message;
    }

    var message = getMessage();
    var param1 = message.param1;
    var param2 = message.param2;

四、使用服務端API傳遞參數

如果數據量較大，不能通過URL或localStorage傳遞，我們可以通過服務端API傳遞數據。可以使用AJAX調用API獲取數據，然後在展示頁面中通過iframe展示相應內容。

在發送方頁面中：

    $.ajax({
        type: "GET",
        url: "http://example.com/api",
        data: { param1: "value1", param2: "value2" },
        success: function(response) {
            var content = response.content; //獲取內容
            $("#my-iframe").attr("srcdoc", content); //設置iframe內容
        },
        error: function() {
            alert("獲取數據失敗！");
        }
    });

在接收方頁面中，可以通過以下方式獲取參數：

    var param1 = getParam("param1");
    var param2 = getParam("param2");

五、小結

我們可以使用多種方式給iframe傳遞參數並獲取數據。根據實際需求和場景，選擇合適的方式是很重要的。