artdialog弹出框子页面和父页面的值的传递

最新推荐文章于 2020-07-09 10:37:26 发布

alleged

最新推荐文章于 2020-07-09 10:37:26 发布

阅读量5.1k

点赞数

分类专栏： iframe页面传值

本文链接：https://blog.youkuaiyun.com/alleged/article/details/72639202

版权

iframe页面传值专栏收录该内容

1 篇文章

订阅专栏

artdialog弹出框子页面和父页面的值的传递

在artdialog弹出框的时候，遇见传值不便问题；目前大概总结出两种方式：

第一种：通过jquery选择art.dialog.open(url,optionls)产生的iframe容器，然后操作相应的元素

父页面操作子页面的方法：
（父页面操作子页面的table获取选中行）
this.iframe.contentWindow. $(“#shouwenLT”).bootstrapTable(‘getSelections’); 子页面操作父页面的方法$ .(‘#objld’, parent.document);
详细的关于iframe父子页面的值的获取参考博文：http://blog.youkuaiyun.com/lhzjj/article/details/17241499

第二种使用框架本身的 art.dialog.data()方法，对值进行存取

// 存储数据第一个参数是name 第二个参数是值
art.dialog.data(‘bValue’, bValue);

//取值参事值的名称
art.dialog.data(‘bValue’）
附上官方文档详解http://www.daimajiayuan.com/download/201304/yulan/artDialog4.1.7/_doc/iframeTop.html

demo iframeA.html源码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script src="../artDialog.source.js?skin=default"></script>
<script src="../plugins/iframeTools.source.js"></script>
</head>

<body style="margin:0">
<div style="width:400px; height:300px; padding:20px">
<div style="margin:4px 0; padding:5px; background:#EEF7F5; text-align:left; color:#000; border-radius:3px; border:1px solid #D7EAE2; " class="tips">我是iframe页面：<a href="iframeA.html" target="_blank">iframeA.html</a></div>
<input style="width:15em; padding:4px;" id="aInput" value="我是小A"> <button id="aButton">传递给B页面</button> <button id="exit">关闭并返回数据到主页面</button> <button id="reload">刷新主页面</button>
</div>
<script>
if (art.dialog.data('test')) {
    document.getElementById('aInput').value = art.dialog.data('test');// 获取由主页面传递过来的数据
};

// 传递给B页面
document.getElementById('aButton').onclick = function () {
    var aValue = document.getElementById('aInput').value;
    art.dialog.data('aValue', aValue);// 存储数据

    var path = art.dialog.data('homeDemoPath') || './';// 

    art.dialog.open(path + 'iframeB.html?fd', {
        id: 'AAA',
        close: function () {
            var bValue = art.dialog.data('bValue');// 读取B页面的数据
            if (bValue !== undefined) document.getElementById('aInput').value = bValue;
        }
    }, false);
};

// 关闭并返回数据到主页面
document.getElementById('exit').onclick = function () {
    var origin = artDialog.open.origin;
    var aValue = document.getElementById('aInput').value;
    var input = origin.document.getElementById('demoInput04-3');
    input.value = aValue;
    input.select();
    art.dialog.close();
};

// 刷新主页面
document.getElementById('reload').onclick = function () {
    art.dialog.data('iframeTools', '我知道你刷新了页面～哈哈'); // plugin.iframe.html可以收到
    var win = art.dialog.open.origin;//来源页面
    // 如果父页面重载或者关闭其子对话框全部会关闭
    win.location.reload();
    return false;
};
</script>
</body>
</html>

demo iframeB.html源码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script src="../artDialog.source.js?skin=default"></script>
<script src="../plugins/iframeTools.source.js"></script>
</head>

<body style="margin:0">
<div style="padding:20px;">
<div style="margin:4px 0; padding:5px; background:#EEF7F5; text-align:left; color:#000; border-radius:3px; border:1px solid #D7EAE2; " class="tips">我是iframe页面：<a href="iframeB.html" target="_blank">iframeB.html</a></div>
<input style="width:15em; padding:4px" id="bInput" value=""> <button id="aButton">返回数据给A页面</button> <a id="reload" href="#">刷新A页面</a>
</div>
<script>
document.getElementById('bInput').value = art.dialog.data('aValue');// 读取A页面的数据

// 返回数据给A页面
document.getElementById('aButton').onclick = function () {
    var bValue = document.getElementById('bInput').value;
    art.dialog.data('bValue', bValue);// 存储数据
    art.dialog.close();
};

// 刷新A页面
document.getElementById('reload').onclick = function () {
    var win = art.dialog.open.origin;
    win.location.reload(); // 注意：如果父页面重载或者关闭其子对话框全部会关闭
    return false;
};
</script>
</body>
</html>