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
Related
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 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
I am currently building an Android and iOS mobile app using Appcelerator/Titanium.
The app is straight forward enough - our API returns a JSON response of the latest stories, the stories and displayed in a list and when a user selects a story this is rendered.
Up until now I have been using Phonegap for our apps, so it was dead simple to simply output the HTML in the JSON response and everything worked.
Now I've moved to Appcelerator due to some limitations I encountered with Phonegap and the fact it's really just a fancy WebView. However I can't see any better way to display a stories content than in a WebView again.
For example, the API returns the complete story content as HTML and can contain pretty much any HTML tag <p>,<strong><img src=""/>links<script></script><iframe></iframe> as we tend to embed facebook,twitter posts, links, videos, graphs, iframes and inline javascript and CSS.
However it almost seems like a step backwards to me to be using WebViews again, but at the moment it seems to be a lot more practical than attempting to parse the HTML and extract elements that could be rendered as native components, most of which probably cant (embedded tweets/facebook)
I know appcelerator allows you to set HTML to the native label component but this only supports Android and does not cover JS or CSS. For iOS I've looked at AttributedStrings but again these are limited in support.
I guess I'm just looking for some re-assurance that this is the correct way to do this. I've read a lot that rendering the WebView components affects performance quite a bit, so this is why I'm so hesitant.
My other quandary is that I am struggling to capture all the clicks in the WebView. If a user clicks on an embedded tweet for example, then the app immediately becomes a full screen WebView of twitter, when really it should open in the external browser (a reason I want to move from Phonegap). Appcelerator does let you communicate via JavaScript to handle things like this, but it doesn't work for things like embedded tweets since they are in iFrames. Surely there is a way to do this, there's countless other apps out there that have achieved what I want to do, I just feel like I'm missing something obvious!
I think your problem can be solved using the webview component but taking into account some limitations:
If you want to capture events inside the webview, it can't be remote (http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.WebView). You can use a local template in your application and retrieve the content using an API service and render the webview as local content, in this way you can capture events like clicks.
There is some limitations to embed third-party content like twitter, facebook. You must make some "hacks" to embedded content works fine.
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.
I'm going to write a simple chrome extension using jQuery and jQuery UI. Before I start, however, I want to know: what might happen if a web page that my extension is going to interact with also uses this libraries? Can there be any conflicts (e.g. CSS for my jQuery-UI theme messing up the page's jQuery-UI theme)?
Javascript is sandboxed so there will be no conflicts, but CSS isn't, so any styles on parent site will affect your styling and vice versa (aka a nightmare).
Yes there can be conflicts, however you can prevent them. When you are setting up a theme, you need to download it with a namespace(you can find that setting in the right column of the jquery ui custom download page), and then use that namespace in your extension. The only possible issue at that point is if the site that is being viewed uses the same namespace that you choose, so make sure you choose something that won't have that problem.
It depends what type of extension you are making. If you are making a replacement for an existing Chrome page, well, it will be a full replacement (http://code.google.com/chrome/extensions/override.html). If it is a popup through either page (http://code.google.com/chrome/extensions/pageAction.html) or browser (http://code.google.com/chrome/extensions/browserAction.html) action, then again, you will have no conflicts because all of your code is sandboxed to itself.
The only time I can think of that you will run into an issue is if you are using content scripts (http://code.google.com/chrome/extensions/content_scripts.html), or actually injecting your code into the page by other means. Then, yes there could be conflicts, as the browser now runs your code along side the web sites code. Depending on what you need to do, you could try injecting your code as an iframe, but that will also prevent it from interacting with said web page.
<iframe src="yourPageUrl" height="iframeHeight" width="iframeWidth" style="border:none;"></iframe>
So without knowing what your extension's purpose was, it would be hard to know exactly how to help.