3

I'm trying to embedding text/html in a react Modal component. But when I run my app with electron the Google Inspector show me some errors.

Uncaught invariant.js:38 Uncaught Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by Example.

SOLUTION : Replace the <object> by <webview>

this is my code

import React from 'react';
import SkyLight from 'react-skylight';

class Example extends React.Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        <section>
          <h1>React SkyLight</h1>
          <button onClick={() => this.refs.simpleDialog.show()}>Ouvrez le modal</button>
        </section>
        <SkyLight  hideOnOverlayClicked ref="simpleDialog" title="Hi, I'm a simple modal">
          <object type="text/html" data="http://www.example.com" style="width:100%; height:100%">
            <p>backup content</p>
          </object>
        </SkyLight>
      </div>
    )
  }
}

Example.displayName = 'Example';

export default Example;

1 Answer 1

1

try to change this line

<object type="text/html" data="http://www.example.com" style="width:100%; height:100%">

with this

    <object type="text/html" data="http://www.example.com" 
style={{width:'100%', height:'100%'}}>

the style attribute expects a json object, for more details you can check this link https://facebook.github.io/react/docs/dom-elements.html#style

Sign up to request clarification or add additional context in comments.

2 Comments

It works but they're problem because of cross domain secure for "https" sites.Error "in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'."
That error means that the host is forbidding you from putting their page in an iframe/object. You will not be able to do what you're attempting, at least with that particular site. It might work fine for other sites/pages though. Read more at: stackoverflow.com/questions/27358966/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.