cxjs - 渲染后CXJS通过ID访问元素？

Question

我有一个带有嵌入内容的 I-Frame。

import {HtmlElement, Link, Section} from 'cx/widgets';
import Controller from './Controller'

export default <cx>
   <h2 putInto="header">
      Home
   </h2>

   <Section mod="card" controller={Controller}>
       <iframe style='border:1px' src:bind="$page.url" id="contentFrame"  width="100%"></iframe>

   </Section>

</cx>

由于 i-frames 需要以像素为单位的高度，我使用控制器来应用调整大小侦听器，并且需要最初直接将 iframes 设置为高。

import { Controller } from 'cx/ui';   

export default class extends Controller {
    onInit() {    

        var url = "https://myContentUrl/?foo=bar&PHPSESSID=" + currentDashboard.customData.session + "&someMore=1";

        this.store.init("$page",{url:url});

        window.onresize = function(event) {
            document.getElementById("contentFrame").height = window.innerHeight-125;
        };

//the following is always null as it seems not to be initialised yet.
       document.getElementById("contentFrame").height = window.innerHeight-125;


   }    
}

如何设置 iframe 的初始高度？像反应这样的参考也不起作用。肯定不是有意的，用户需要调整浏览器窗口的大小才能获得完整大小的 i-frame。;)

谢谢 ：-）

Answer 1

这个问题通常使用应用于 Section 的 CSS flexbox 来解决bodyStyle。

https://fiddle.cxjs.io/?f=Kjarwesn

该部分需要有一个明确的高度集，可以以像素为单位指定，相对于视口高度 (vh) 或再次使用 flexbox。

<Section
      title="Section"
      mod="card"
      style="height: 50vh; border: 1px solid red"
      bodyStyle="display: flex; flex-direction: column"
    >
      <iframe src="..." style="flex: 1 1 0%" />
</Section>