渲染后按ID访问CXJS元素？

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帧需要以像素为单位的高度，因此我使用了一个控制器来应用resize-listener，并且需要直接将iframe初始设置为高。

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的初始高度？像react这样的引用也不起作用。用户需要调整浏览器窗口的大小以获得完整大小的i-frame，这肯定不是故意的。;)

谢谢:-)

Answer 1

这个问题通常是通过在部分的bodyStyle上应用CSS flexbox来解决的。

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>