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?
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?
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
Related
very much a newbie from a developer perespective but will do my best to explain.
Essentially my small startup offers a solution whereby you can embed some simple HTML/JS snippet onto a page and then style by inheriting/customising with your own brand css etc. That snippet calls our service to display 3rd party infortmation but the the advantage is it's embedded in the customers site.
In most cases we demo it to potential clients by pasting it into an existing page on their site using proxyman's map local tool to override. However with the rise in react based sites this approach isn't working as the code is handled in the app so it simply just overrides when we refresh the page.
I'm wondering if there is a workaround or a tool out there that would stop the react experience from overriding the snippet we are dropping in via proxyman?
Any help appreciated!
I've looked into a couple chrome extensions that supress react but that hasn't worked and there's no docs on proxyman that address it
My VueJS application usually contains links to other pages (documentations) but it would be desirable to display the documentation content inside my page without the users having to leave for another page. Some of them are hosted on GitHub pages and although I could embed them into my app via iframe, I can't get rid of the feeling that there must be a more elegant way to display the information from the external documentation.
All I can think of is to write some kind of HTML parser on top of jssoup, however, this seems to be a very tightly coupled approach to the target page that could potentially require adjustments whenever the structure of the target page changes..
Is there any potential approach that I could consider to solve this issue?
Thanks!
I think this topic is obsolete. Turns out that one could use iFrames or crawl the contents from which both solutions aren't very pretty and infeasible in general.
I am pretty sure I know the answer, but throwing this out in hopes that someone has an idea I have not thought of.
I am doing a Cordova app for a client that wants one of the pages to have their current mobile site wrapped (below navigation bar). The app is using Angular JS and I was just going to wrap that page with an iFrame... but ran into the X-Frame-Options: Deny issue that they wrapped their entire site under.
Ideally they will remove that, but with politics it might not be possible.
Is there any way else that I can load this site up without an iframe? I am guessing not because of the security issues this was trying to solve in the first place.
The best way that I was able to solve it in the end was to use a plug-in that launched a new webview with the site inside it, then modifying the webview and plugin to look like the rest of the app.
Here is the great plugin I started with:
https://github.com/apache/cordova-plugin-inappbrowser
Its been a few years since I have worked on Chrome apps. I started messing around with making some simple examples to learn the new process. The problem is that I have found that using an <a> tag to change the html page that is loaded to another html page inside the packaged app will not work. I'm looking for different methods of changing the screen with retrieving user input (button click, link click. and so on). I have looked online and have found very little documentation about making chrome apps most examples show how to make a simple "Hello World" and how to publish it. Not many extensive tutorials beyond that. Just to clarify this app would be a real chrome app not a link to some site. all files would be packaged with the chrome application.
Chrome Apps are meant to be "single page apps", and cannot navigate links by design. <a> links should open in a regular browser window instead.
If you want to do "url routing" within your application to change views, you can just roll your own solution, but should probably use a framework to help you out instead.
Here are some examples:
Polymer
Angular
Ember
Meteor
Backbone
The list is extensive. There are likely many other stack overflow answers that compare each framework.
The DOM (Document Object Model) which represents the contents of a Chrome App window is initiated from an HTML file, but from that point on you can't change it by referencing any other file, which is what you're expecting navigation to do. (<a> elements that navigate to an external browser via a "target=_blank" attribute are perfectly OK.)
However, you are free to change the DOM from your JavaScript at runtime. If you like, set an event handler on the <a> element and change the DOM as you wish. If you want to change the DOM via HTML (not from a file), you might find the JavaScript method insertAdjacentHTML useful. Actually, you can get the HTML from a file, but you have to read that file yourself with the Chrome App file I/O API.
Advice in another answer to use a framework is, in my opinion, overkill. If you think of a Windows app, a Mac app, or any other kind of GUI-based app, you would never assume that you could just change the UI over to something completely different by referencing an HTML file. Think of a Chrome App as being similar to those technologies in that sense, and you'll be on the right track.
I am trying to make a Google Chrome extension using content script.
My goal is to have a display at the top of the page (which is already working on my own pages) that can interact with the page.
I need things which are very complicated to put together in an extension, due to security policies :
Using require.js on the extension (that works for now, using this Github repo)
Using a templating engine to describe my display : I need to add a lot of content to the page and I don't think writing HTML in javascript would be a good workflow.
For my current version I use jade with my server, but this is not possible with an extension. I think I need to use something like Angular.js or Backbone.js, but I can't make them work on the content script.
I need a lot of communication between my extension and the page : For example I need to detect almost constantly mouse moves
I need communication with my server using socket.io
Every bit of functionality of my extension have been developed and tried in a standalone web page, but now I need to integrate it in a real extension and I am really stuck
So due to these requirements, I am wondering what would be the right approach for building this : putting it all in an iFrame (would the server-side communication work? And how to communicate with the page ?), or a way to make a templating engine work nicely in there, or a solution I didn't think of?
Try this:
Develop the HUD part as a standalone page that the content script will include in an iframe. You should be able to use Angular.js etc. with this, but you will need local copies of as much as possible and you'll need appropriate entries in the manifest.json to get it working in the extension. See/create other questions for the details.
Have your content script inject the code to monitor mouse-moves, etc. into the target page. Have this code digest and summarize the data, so it's not spamming the system. Maybe message the summaries to the HUD page and/or content script five or six times a second.
After that, it should just be a matter of getting the pieces working, one at a time. Break it down to specific problems and ask a question on one specific problem at a time (If you can't find the answers in previous questions).
I'm pretty sure what you appear to want is do-able, but the details are too broad for a single Stack Overflow question.