-1

I developed a React application using create-react-app and was trying to embed another website on to the React App using Iframe. It was working fine until I tried to resize the iframe to fit the size of my page, I was getting Blocked a frame with origin from accessing a cross-origin frame.

To tackle this, I tried npm packages like iframe-resizer, zoid, and few others but none of them helped me. After a lot of frustration, I decided to move away from the iframe.

Could anyone point me a good way to embed a website on to my react application without iframes?

sravan
  • 97
  • 1
  • 10
  • Just out of curiosity - why you want to place a website inside your website ? – Dimitar Tsonev Jul 25 '19 at 21:14
  • Well, I'm building multiple individual react applications, and I want to integrate all of them one place. When I make a change to one application, I don't want my rest of applications to go down. Hence, the usage of Iframe (Keeps the application separate, and any changes to child apps do not affect parent app) – sravan Jul 26 '19 at 16:20
  • As of now, I've started creating my own Web Components for child apps and importing inside the Shadow DOM of Parent app. This is working fine so far. Not sure, whether this is going to be a problem. – sravan Aug 07 '19 at 14:22

2 Answers2

0

May be the better way is to create an HTML page with some divs and then use this solution to load all the child sites

How do I load an HTML page in a <div> using JavaScript?

Emanuele Scarabattoli
  • 4,103
  • 1
  • 12
  • 21
-1

Their is now a React version of iframe-resizer, that might make things easier for you.

https://github.com/davidjbradshaw/iframe-resizer-react

Be aware that you need to still include a script on every page in your iframe for this to work.

https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70