将字型分配给iframe

编程问答 2022-08-14

问题描述

我在reactJS中做了一个代码编辑器，我正在尝试编写Typeform代码，以便在iframe中看到输出。如果我在iframe或render()或componentDidUpdate()或任何其他帮助功能中将值赋给shouldComponentUpdate()，则iframe的内容将不存在。

但是，如果我刷新页面并在componentDidMount()中分配来自数据库的值，则iframe的内容就会出现，并向我显示预期的结果。

我的要求是在任何帮助功能中将值分配给iframe，但是这样做iframe的内容就不会出现，在这种情况下，我将获得白屏。除Typeform代码外，其他所有类型的代码都可以正常工作，并在iframe中为我提供了所需的结果。

关于如何克服这个问题的任何想法？

我的Typeform代码是：

<div class="typeform-widget" data-url="https://form.typeform.com/to/gWfKQXJg" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id="typef_orm",b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

解决方法

您是否要在React应用程序中嵌入一个字体？ 如果可以的话，您可以使用react-typeform-embed package

并在您的项目中像这样使用它

import React from 'react';
import { ReactTypeformEmbed } from 'react-typeform-embed';

class App extends React.Component {
  render() {
    return <ReactTypeformEmbed url="https://demo.typeform.com/to/njdbt5" />;
  }
}
iframeiframejavascriptreact-lifecyclereactjsreactjsreactjsreactjstypeform