如何在 Lightning 应用程序构建器中使用带有 Lightning:container React 的visualforce 页面?

问题描述

我尝试通过闪电在 Visualforce 页面内创建一个 React 应用程序.当我在visualforce设置中点击预览时，一切都很好.

I try to create a React app inside visualforce page via lightning. When I click preview in visualforce setting, everything is fine.

但是当我在 Lightning 应用程序构建器中使用它时，它不起作用.表明

But when I use it in Lightning app builder it does not work. It shows

错误:Refused to frame 'https://mirage-video-dev-ed--ltng.container.lightning.com/' 因为祖先违反了以下内容安全策略指令:frame-祖先 https://mirage-video-dev-ed--c.visualforce.com".同样很奇怪的是，如果我右键单击并选择重新加载框架"，它就可以工作.

The error: Refused to frame 'https://mirage-video-dev-ed--ltng.container.lightning.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://mirage-video-dev-ed--c.visualforce.com".Also really weird that if I right click and choose "Reload frame", it works.

Visualforce 代码

Visualforce code

<apex:page >
    <apex:includeLightning />
    <div id="hello" />
    <script>
        $Lightning.use("c:myFirstApp", function() {
            $Lightning.createComponent("lightning:container",
              { src: "{!$Resource.hello + '/index.html'}"},
              "hello",
              function(cmp) {
                console.log("created");
                // do some stuff
              }
          );

        });
    </script>
</apex:page>

myFirstApp

<aura:application access="global" extends="ltng:outApp">
    <aura:dependency resource="lightning:container"/>
</aura:application>

有办法解决吗?我找不到直接加载 aura:application 的方法，所以如果有方法请告诉我.

Is there a way to fix it? I cannot find the way to load aura:application directly so if there is a way please show me.

推荐答案

您遇到了一些初始问题...您只需要直接在 VF 页面内安装您的 React 应用程序.无需使用 lightning:container.

You've got a bit of a inception problem going on... You just need to mount your react app directly inside of the VF page. No need to use a lightning:container.

查看我的 B.A.S.S. 项目.事实证明，这是有效的并且具有极强的可扩展性.

See my B.A.S.S. project. This is proven to work and be extremely scalable.

带有反应应用程序的 VF 页面示例:

Example VF Page with react app:

<apex:page showHeader="true" sidebar="false" standardStylesheets="false" docType="html-5.0">
    <script type="text/javascript">
        //rest details
        const __ACCESSTOKEN__ = '{!$Api.Session_ID}';
        const __RESTHOST__ = '';
    </script>
    <div id="root"></div>
    <!-- Your react entry point -->
    <script type='text/javascript' src="{!URLFOR($Resource.app, 'dist/app.js')}"></script>
</apex:page>

也可以直接在 LWC 内运行 React 应用程序，虽然不推荐.

It is also possible to to run a React App directly inside a LWC, although no recommended.

这篇关于如何在 Lightning 应用程序构建器中使用带有 Lightning:container React 的visualforce 页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！