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需要像素高度，我使用控制器来应用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的初始高度？反应之类的参考也不起作用。用户需要调整浏览器窗口大小以获得完整大小的i帧，这无疑是不可取的。 ;）

谢谢： - ）

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>

渲染后，CXJS按ID访问元素？

1 个答案: