Question

我创建了一个Preact网站：https://alwaysselector-2d06f.firebaseapp.com/，另一个网站允许我在其“ contentDiv”中上传内容。

<div id="contentDiv">
 //what should I put here?
</div>

我的问题是我不知道在div中放什么。我不想使用iFrame，因为在某些情况下，我的外部网站高度可能会有所不同。因此，

<iframe src='https://alwaysselector-2d06f.firebaseapp.com/' />

不起作用。从我的外部网站获取所有html以在contentDiv中加载的最简单方法是什么？

Answer 1

现有应用程序HTML

<div id="someOtherApp">
   <h1>
     Some other app
   </h1>
   <div id="addYourPreactApp">
       <h1>Add Preact app hook here</h1>
       <div id="preactAppRoot"> 
       </div>
   </div>
</div>

现在，您可以将preact应用程序连接到html元素（div＃preactAppRoot）中。

/** @jsx h */
const { h, render, Component } = preact;    // normally this would be an import statement.

class Clock extends Component {
    constructor() {
        super();
        // set initial time:
        this.state.time = Date.now();
    }

    componentDidMount() {
        // update time every second
        this.timer = setInterval(() => {
            this.setState({ time: Date.now() });
        }, 1000);
    }

    componentWillUnmount() {
        // stop when not renderable
        clearInterval(this.timer);
    }

    render(props, state) {
        let time = new Date(state.time).toLocaleTimeString();
        return <span>{ time }</span>;
    }
}

// render an instance of Clock into <body>:
render(<Clock />, document.getElementById("preactAppRoot"));

可以在jsfiddle上找到工作示例-https://jsfiddle.net/cte27dhw/

如何将Preact网站嵌入现有网站？

1 个答案: