JBCefBrowser load iframe HTML, unable to input Chinese Input

Answered

code:

Content content = contentFactory.createContent(new ChatBrower().getComponent(), "", false);

this.contentManager.addContent(content);

public class ChatBrowser extends JBCefBrowser {
    public ChatBrowser() {
        super(createBuilder().setEnableOpenDevToolsMenuItem(true));
        loadHTML(HTML_CONTENT);
        this.getJBCefClient().addLoadHandler(new CefLoadHandlerAdapter() {
            @Override
            public void onLoadStart(CefBrowser browser, CefFrame frame, CefRequest.TransitionType transitionType) {
                super.onLoadStart(browser, frame, transitionType);
                openDevtools();
            }

            @Override
            public void onLoadEnd(CefBrowser browser, CefFrame frame, int httpStatusCode) {
                super.onLoadEnd(browser, frame, httpStatusCode);
            }
        }, this.getCefBrowser());
    }

    private static final String HTML_CONTENT = """
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <style>
                  html,
                  body,
                  div,
                  p,
                  iframe {
                    background: transparent;
                    padding: 0;
                    margin: 0;
                    box-sizing: border-box;
                    overflow: hidden;
                  }
            
                  #message {
                    display: flex;
                    justify-content: center;
                    align-items: flex-start;
                  }
            
                  #message div {
                    width: 100%;
                    max-width: 300px;
                    color: hsl(var(--foreground));
                  }
              
                  #message a {
                    color: hsl(var(--primary));
                  }
              
                  #message div {
                    margin: 16px;
                  }
              
                  #message div p {
                    margin: 8px 0;
                  }
              
                  iframe {
                    border-width: 0;
                    width: 100%;
                    height: 100vh;
                  }
                </style>
            </head>
            <body>
                <iframe id="chat" src="http://www.baidu.com" ></iframe>
                <script>
                </script>
            </body>
            </html>
            """;
}


phenomenon:

English input method is normal

But I directly used JBCefBrowser to load this URL, and the Chinese input method works normally

code:

Normal

The URL here can be used with other web pages, as long as it can be entered, the Chinese input method has no effect. If an iframe is used. May I ask what the problem is? I hope it can be resolved. Thank you

0
4 comments

Hi, Karol Lewandowski,Thank you, this article solves this problem. Thank you so much. But will disabling OSR cause any other problems? I would like to consult with you about the plugin solution above: embedding it into a web page, which also has a set of iframes inside. The company will put a plugin web page into the cloud service. Idea and VSCode can be accessed through iframe, creating a unified entry point for easy management. Is there any problem with this plan, idea, Because we have discovered the issue of invalid Chinese input method by simply embedding iframes, but disabling OSR, will there be other problems when developing with this solution in the future? Is this solution good.

0

Hi,

It's hard to foresee other issues, as I don't know how complex your embedded page will be and what interactions with the IDE will be implemented and how.

Potential issues mentioned in the linked post:

 You may experience a couple old problems with OSR disabled:
- issues with rendering the components overlapping JCEF component(that's the main reason why we switched to OSR). 
- focus issues. The browser may not always return focus on request from the client code.

 

0

Please sign in to leave a comment.