使用iframe的父子页面进行简单的相互传值

最新推荐文章于 2024-08-02 09:29:40 发布

time141

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量7k

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/time141/article/details/120044398

版权

本文介绍了如何在HTML的iframe中实现父子页面之间的数据传递。内容包括父亲页面father.html接收子页面son.html的数据，以及子页面获取父页面的数据的实现方法，详细展示了代码示例和最终的效果图。

摘要由CSDN通过智能技术生成

使用iframe标签嵌套页面时，遇到了问题，父页面通过接口请求的数据，应该如何传给子页面呢？作为一个刚刚入门的前端小白，只有边百度边写demo，研究一下iframe的父子页面的传值，如果有什么不对的地方请大家指出。

父页面：father.html,子页面:son.html

1、父页面获取子页面传入的数据（子页面给父页面传值）

父页面：

//父页面接收子页面的数据
    function GetChildValue(obj) {
        document.getElementById('test').innerText = obj;
    }

子页面：

//子页面传给父页面的数据
    var txt = "这是子页面传给父页面的数据";
    parent.GetChildValue(txt);

2、子页面获取父页面的数据（父页面给子页面传值）

父页面：

//父页面传值给子页面
    function toChildValue() {
        var data = '这是父页面传给子页面的数据';
        return data;
    }

子页面：

//子页面接收父页面传过来的数据
    var data = window.parent.toChildValue();
    document.getElementById('txt').innerText = data;

父页面father.html完整代码：

<!DOCTY

关注