Inject Javascript code into iframes in react native webview - ios

I am using the react-native-webview package to display a Webview in my Expo React Native App.
The problem I encounter is that I want to inject Javascript code not only into the main frame of the displayed page but also into an iframe on the page.
I already found out that I can eject my project and write custom code to intercept all web requests on Android (and then inject my JS code by modifying the response) but I can't find a solution for iOS.
Does anyone have a solution for that specific problem? Is it possible to intercept web requests on iOS?

Related

Xamarin.Forms WebView, WKWebViewConfiguration, and Sending "Mobile" Headers

I'm getting back into Xamarin.Forms, and I've discovered a new behavior of iOS 13 Safari on the iPad called "Desktop-Class Browsing." It's covered in detail here:
https://developer.apple.com/videos/play/wwdc2019/203
The problem for me is that I need my Web application to be able to detect if a normal Web browser is viewing it or if it's being viewed by a Xamarin.Forms.WebView. From my Web application, I used to be able to detect a Web view with the user-agent string or with the X-Requested-With header. But if my Web view is running on an iPad on iOS 13, it will enter desktop mode, which yields a desktop Safari user agent a no X-Requested-With header, and I can no longer detect that it is a Web view. This is referenced at 2:56 in the above video.
In a native iOS application, I can apparently use WKWebViewConfiguration to control these desktop-like featuers:
https://developer.apple.com/documentation/webkit/wkwebviewconfiguration
I think this is demonstrated at 9:01 in the video in my first link.
How can I use WKWebViewConfiguration with Xamarin.Forms? I see a WebKit.WKWebViewConfiguration class, but how can I utilize it with Xamarin.Forms.WebView?
Unless you follow the steps in this article, your app is using UIWebView instead of a WKWebView
There are several ways of getting access to editing the WKWebViewConfiguration:
You can use a "Custom Renderer" to implement your own WKWebView as shown in this Official Xamarin Forms example, and edit the WKWebViewConfiguration there.
Another possible way that I haven't tried- You can also implement a WKWebView inside your forms using the steps mentioned here. And then just edit that property.

How to use postmessage with wkwebview plugin in cordova phonegap build

I am using cordova-plugin-wkwebview-engine in a phonegap app to open a web page:
ref = window.open(url, '_self', 'location=no,toolbar=no');
All is working fine thus far, page displays properly, iOS log says the app is using wkWebView, and the display is much faster than when using UIWebView.
I want to send a postmessage from the page in the WkWebView and handle the message in my index.js running on the device. From the WkWebView issues pages, I copied the following code into the webpage:
<button type="button" name="button" onclick="sayHello()">Say hello</button>
<script type="text/javascript">
window.addEventListener("message",function(event){
console.log("IFRAME");
console.log(event);
}, false);
function sayHello(){
parent.postMessage("Hello!","*")
}
</script>
I compile/install the app and run. I tap the button and the debugger says that parent.postMessage executes. So now I'm ready to code the message handler on the device side.
The copied code obviously assumes that it is running inside an iframe on what I assume is the main index.html launched by Phonegap.
Before I try the iframe approach, I want to know: Has anyone has found a way to use postmessage to communicate between index.js and the WkWebView WITHOUT resorting to iframes?
For example, my window.open creates object 'ref'. Can I simply add an event listener on 'ref' to capture the message? If so, then I suspect I'll need to use something other than 'parent' when calling 'parent.postmessage'. What would that be?
Suggestions are good, examples are better.
Note that this app has not yet required delving into native code... Phonegap Build has been doing just fine to create my installables. I'd like to keep it that way if possible.

how to open webview inside facebook messenger on desktop web browser

I'm trying to implement some features inside a web view in facebook messenger. on the phone the webview is opening fine, but in desctop web browser the webview is opening inside a new tab.
im using the following feature:
buttons:[{
type: "web_url",
url: "https://www.oculus.com/en-us/rift/",
title: "Open Web URL",
webview_height_ratio: "compact",
messenger_extensions: true,
}
I know that maybe it is supposed to open like this but you all can agree that if I'm implementing a custom feature inside the conversation it would be mach better to open it inside a small webview in the conversation.
does anyone knows if this even possible?
You have to follow the steps in these docs.
Make sure to read the docs for desktop and add the X-Frame-Options header. The troubleshooting section in the same docs is your friend.
Two caveats:
X-Frame-Options header does not seem to be enough for firefox. I'm in the process of building a bot using webview, and when I figure out which headers to send to make firefox work, I will post them here. EDIT due to some bugs within the platform on the web, I've postponed this project.
There seem to be a problem with getting page-scoped user ids on desktop. Read my question.

Load web page in PhoneGap app

I'm using PhoneGap with AngularJS framework.
I want to display a web page. I tried to use iframe but scroll isn't working.
I want to keep this page inside my app and not as a in app browser or external browser.
My app is running on iOS, Android and WP8 both.
Some help please :)
Thanks in advance
function loadWebView(pid)
{
var url = "http://dummysite.com/index.php/catalog/product/view/id/"+pid;
$("#div_load_page").html('<object data='+url+' class="webview"/>');
};
This is simple jQuery I've applied in my phonegap application which gives me the desired result. Scroll bars are visible and depend on site's responsiveness and size.
See Result.

Titanium webview iframe doesnt seem to store cookies

I am developing an app using Appcelerators Titanium. The app consists of a webview. The webview shows i local page, iframe.html, and this iframe's src is pointed to a remote page.
However, this doesn't work out as i expected since it doesn't seem like the remote page can't store cookies when wrapped in an iframe. It works great on desktop and other devices. This seems to be an issue exclusive to iOS. I need the iframe, and i need cookies. What can i do to solve this?

Resources