webpack Iframe在npm运行构建中不起作用,我该怎么办?

4bbkushb  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(195)

我在我的项目中使用了iframe开发react框架,在npm运行启动的时候,iframe运行的很好,但是在npm运行构建的时候,它就不工作了。
这是我的代码。

var sample_url = "https://codesandbox.io/embed/q7jmjyplvq?fontsize=14";

  return (
    <DynamicComponent name="UserProfile.ApiKeyForm" {...props}>
      <Form layout="vertical">
        <hr />
        <Form.Item label="API Key" className="m-b-10">
          <InputWithCopy id={apiKeyInputId} className="hide-in-percy" value={user.apiKey} data-test="ApiKey" readOnly />
        </Form.Item>
        <Button className="w-100" onClick={regenerateApiKey} loading={loading} data-test="RegenerateApiKey">
          Regenerate
        </Button>
      </Form>
      <Button className='w-100' style={{color:'blue', marginTop:'10px'}} onClick={sendKeycloakApi}>API Send</Button>
      <iframe src={sample_url} id="iframeid" title="Plotly All Graph Types" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
      
    </DynamicComponent>
  );
}

在npm中运行构建版本

在npm运行开始

enter image description here

vxf3dgd4

vxf3dgd41#

你可以看看这些链接:
https://www.npmjs.com/package/iframe-script-loader
https://blog.logrocket.com/best-practices-react-iframes/
https://github.com/sveltejs/svelte/issues/6967

  • 最佳做法:*
    您可以使用下列项目:

(Func:useState() or Class:state:{...})

而不是:

var simpleurl = '...'

相关问题