Add an external html file with query strings in reactjs

Question

I have an html file and it accepts few query strings

Html file also contains css and script included using script tag

ie we can call this html file as below

external.html?param='something'

i have to use this html in a react component and return as JSX. currently i have done returning as an Iframe as below

const Component = () => {
    const iframeUrl = `external.html?param='something'`;
    return (
        <iframe
            {...props}
            src={iframeUrl}
        />
    )
}

but how can i do without using iframe or iframe with local html(should not download html from server all the time)?

Answer 1

You cannot just import an HTML document as a react component. Iframes are just for that.

To import a local html file as an iframe without constantly requesting a remote resource you should paste the file content into the iframe's srcdoc attribute which is an alternative to src for inline html.

Keep in mind though that the html will still be transmitted on a reload, just together with the rest of the app instead of in a separate request. For real caching you'll have to utilize the local storage mechanisms et al.

With this in place, you can then manipulate the query params:

// iframe inside a react ref
frameRef.current.contentWindow.location.href += 'myQueryParams'

You can also refresh the frame (it preserves the params):

frameRef.current.contentWindow.location.reload()