Alternative to iframe for ReactJS - javascript

So I'm currently using iframe to embed Bing Translator and also Bing Images onto my website. However, I want to find alternative to iframe because I'm using a certain library that can't detect iframe. What alternatives can I use to embed website onto my ReactJS app?
A little more details:
The library that I'm using is OpenReplay which is an open-source session replay library. However, on its website, it is mentioned:
If your web app includes iframes, then you won't be able to playback their content as part of your recordings. You can still start OpenReplay inside an iframe by including tracker.start(), but it will considered as a separate tab, which means it will be captured in a separate recording.
Having a separate tab is definitely not something I want.

I can feel the pain of using iframes in today's world. There are a few legacy sites and a few standard modules which are not available as open source, in that situation alone we can go for iframes.
since you mentioned 'Bing Translator' I believe Microsoft has an API available for that purpose checkout MS Translator and guide for a free setup translator setup alternatively you can go with other platforms too.

Related

How to use OpenTripPlanner inside of a javascript website?

I am fairly new to the OpenTripPlanner and would like to implement it into a small portion of an already built website. Is this possible and if so how would I go about adding it?
The OpenTripPlanner platform provides a web front-end to plan journeys so you can embed that into your website using an iframe.
http://docs.opentripplanner.org/en/latest/Basic-Tutorial/#simple-one-step-server
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Are there advantages to using Adobe CC apps to create interactive content for AEM?

My client recently moved to AEM and their website is now based on it. We have been asked to create an interactive HTML5 'component' (my term, not AEM's) to embed in a page. In the past, we have created them using custom HTML5, but had a challenge integrating it into pages on the previous platform.
With my client's move to the AEM web platform, will the importing or placement of our HTML5 code and related files be quicker / easier / more compatible if we develop with an Adobe Creative Cloud app? For budget reasons, we are specifically looking to save development and integration time.
We have access to developers who know Adobe Animate CC, which is now targeted at developing interactive HTML / JavaScript content. The other possibly relevant Adobe CC app would be Dreamweaver, but that is not something I would like to use.
In short: no, you won't save time.
When you want to create content for AEM, it should based on a component which gets integrated into a page's parsys. The best case scenario would be: you are provided with some hooks and integrate you component as a component using defined dependencies to avoid naming collisions etc when the JS and CSS is loaded.

Should I Be Using A WebView?

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.

tvOS load website URL

I am new in tvOS application. i am trying to integrate custom application with TVML & TVJS. I created a page and add banner in it. My requirement is to load a webpage inside that application. I tried different methods to load a webpage using that application.js file but fails. Please help me how to load a webpage using TVML and TVJS.
If I understood you correctly, you need to use UIWebView class but you cannot find it in the tvOS SDK (because it was removed). But you can use this class as a "private API class" (you can create an instance of this class and call methods for it, because you have enough information about UIWebView). It can be hard for you. If so, you can use some libraries (such as https://github.com/jvanakker/tvOSBrowser) that using the private API to make UIWebView available in the tvOS.
I think you might have a hard time on getting a web browser on the TV app store, as I think apple does really see people browsing on the apple tv.
Depends on your use case,
if you are only trying to display a page, you might able to use some of the online url to picture services like https://urlbox.io/docs, or build your own server using existing browser features. https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/getScreenshot
If you are getting users to another services, the correct way to do is with deep link, which you can learn more about here. https://developer.apple.com/videos/play/wwdc2017/246/
or if you are trying to transfer the view into sales, displaying a QR code is the way to go. as iOS 11 makes QR Code scanning a standard, it will be very easy for your users to scan the code. https://www.cnet.com/how-to/how-to-use-ios-11s-hidden-qr-code-reader/

Interacting with webpage from C++ Application

i have a sitation where i want to access HTML DOM object from within my application to update certain parts of web page through javascript commands at run time.
It is a local webpage opened in FireFox which would be accessed by my application, so that the final output is always shown at the webpage which is updated by appliation.
It would be great if you could give me some idea about how this can be accomplished.
I have similar requirement like the webmonkey extension of firefox but need to do it outside of browser from my application.
You can try QtWebKit from the Qt framework, it provides an OO set of classes to interact with webpages from basic actions to very complicated and advanced stuff. I believe you may find your answer there, a link is provided below...
Good Luck
see Here

Categories