Hi, I’m Dung Huynh Duc . Nice to meet you.

About Me

I’m a full stack developer. I’m a fast learner and self-taught coder. I often take my time for researching and learning about hot and trending technology.


Reload page from iframe with cross-domain support

Hi there,

This demo use React as a demonstration but it should work the same for other UI framework or with vanilla JS.

At first, we will send a message from the iframe to the parent.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>Reload Iframe Example</p>
            onClick={() => {
              window.parent.postMessage("reload-page", "*");

Then from a UI component, we will use useEffect to listen to messages from Iframe.

useEffect(() => {
    const listener = (event: any) => {
      // TODO: check origin source for security
      if (event.data === 'reload-page') {

    // listen to reload message on iframe
    window.addEventListener('message', listener);

    return () => {
      // clean listener
      window.removeEventListener('message', listener);
  }, []);

  return (
          title="Trading System"
          sandbox="allow-same-origin allow-scripts"

That's all :) Cheer.