HT开发js父子页面相互传参问题

js父子页面相互传参问题

这里的父子页面是HT中图纸里嵌入一个iframe组件,图纸在workshop.html中加载,可以给图纸上的各个组件赋值，即父页面workshop.html

嵌入的iframe组件，iframeURL是index.html,即子页面index.html

在iframe组件中，给iframe设置一个id

if (!cache.htmlView) {
        var iframe = cache.htmlView = document.createElement('iframe');

      // iframe.frameborder="0" 去边框;ie7无效
        iframe.setAttribute("frameborder", "0", 0);  
        iframe.setAttribute("id", data.getTag());  
        iframe.addEventListener('mousedown', function(e){e.preventDefault();}, false);
        iframe.layoutHTML = function() {
            gv.layoutHTML(data, iframe);
        };
    }
    //地址相同不再刷新
    if(data.a('oldiframeURL') != data.a('iframeURL')) {
        cache.htmlView.src = data.a('iframeURL');
        data.a('oldiframeURL',data.a('iframeURL'))
    }
    cache.htmlView.frameborder='0';
    return cache.htmlView;

1）父页面给子页面传参

父：

// 给子页面index.html传值
function iframeMessage(message) {
      let iframe = $('#iframe')[0];
       iframe.contentWindow.postMessage(message, '*');
}

每个iframe的id不一样，但是 $(’#iframe’)[0] 不是特别明白为什么必须要加[0]

子：

// 得到父页面workshop.html传值
window.addEventListener('message', function (event) {
    console.log('接收父页面传过来的值', event.data);   
}

2. 子页面给父页面传值

子：

// 给父页面workshop.html传值
window.top.postMessage(params.value);

父：

window.addEventListener('message', function (e) {
    let param = e.data;
    console.log('message==', param);
}, false);