当前位置：首页 > 行业动态 > 正文

html中如何获取父页面的值

在HTML中，要获取父页面的值，可以使用JavaScript的window.parent对象，以下是一个简单的示例：

1、创建一个HTML文件，例如index.html，并在其中添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>获取父页面值示例</title>
</head>
<body>
    <h1>子页面</h1>
    <button onclick="getParentValue()">获取父页面值</button>
    <script src="script.js"></script>
</body>
</html>

2、创建一个JavaScript文件，例如script.js，并在其中添加以下内容：

function getParentValue() {
    // 获取父页面的iframe元素
    var parentIframe = window.parent.document.getElementById('parentIframe');
    // 获取父页面的值
    var parentValue = parentIframe.contentWindow.document.getElementById('parentValue').value;
    // 显示父页面的值
    alert('父页面的值是：' + parentValue);
}

3、在父页面（例如parent.html）中添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>父页面</title>
</head>
<body>
    <h1>父页面</h1>
    <iframe id="parentIframe" srcdoc="<p><input type='text' id='parentValue' value='这是父页面的值'></p>"></iframe>
</body>
</html>

在这个示例中，我们创建了两个HTML文件：index.html和parent.html。index.html是子页面，parent.html是父页面，我们在子页面中添加了一个按钮，当点击该按钮时，会调用getParentValue()函数，这个函数会获取父页面的值，并显示在一个弹出框中。

本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/322110.html
0

相关文章

随机文章