Develop Reference

Force open a new tab in mobile browser from an app

I have an app that has a webview in xamarin and shows a web which has links that are configured in this way:
<a target="_blank" href="http://www.web.com"> http://www.web.com </a>
but they do not work, I suppose this happens because when viewing the web from an app, it is not able to open the link in a new window.
I have also tried window.open without any changes.
How I could configure the link to force open the browser with a new link window.
Thanks.

I think this should happen on Android，if you want to open a new window with browser,you could use SetWebChromeClient method for your WebView in your custom renderer.
create a custom renderer in android project:
[assembly: ExportRenderer(typeof(WebView), typeof(AndroidWebView))]
namespace your namespace
{
class AndroidWebView:WebViewRenderer
{
public AndroidWebView(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
{
base.OnElementChanged(e);
Control.SetWebChromeClient(new MywebviewChrome());
}
private class MywebviewChrome : Android.Webkit.WebChromeClient
{
public override bool OnCreateWindow(Android.Webkit.WebView view, bool isDialog, bool isUserGesture, Message resultMsg)
{
Android.Webkit.WebView.HitTestResult result = view.GetHitTestResult();
string data = result.Extra;
Context context = view.Context;
Intent browserIntent = new Intent(Intent.ActionView,Android.Net.Uri.Parse(data));
context.StartActivity(browserIntent);
return false;
}
}
}
}
in your forms project xaml :
<WebView HeightRequest="800" WidthRequest="600" x:Name="webview" ></WebView>
in your page.xaml.cs:
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = #"<a target='_blank' href='http://www.web.com'> http://www.web.com </a>";
webview.Source = htmlSource;

As you supposed, Xamarin.Forms doesn't support opening new tabs / windows.
BUT the Webview component has an event handler called "Navigating" on which you can subscribe to execute code every time the webview tries to open a new page.
public void NavigatingEventHandler(object sender, WebNavigatingEventArgs args)
{
if (args.Url.StartsWith("https://"))
{
//If you want to open the new window in the OS browser
Device.OpenUri(new Uri(args.Url));
//If you want to open the new window inside the webview
webview.Source = args.Url;
args.Cancel = true;
}
}
XAML:
<WebView x:Name="webview" Navigating="NavigatingEventHandler" />

JavaScript/Jsoup - Get background-image url from "i class"

So I'm loading a webpage in my app's webview and there's an HTML i class="img profimage" and it has a background-image url and that's my target...
I want to get that target either with JavaScript or using Jsoup...
What I tried so far with Jsoup is this:
public class GetImage extends AsyncTask<String, String, String> {
protected String doInBackground(String... strings) {
Document document = null;
try {
document = Jsoup.connect(url).get();
} catch (IOException e) {
e.printStackTrace();
}
String temp = document.select("i.img.profpic").first().getElementsByAttribute("style").toString();
return temp.substring(temp.indexOf("(") + 1, temp.indexOf(")"));
}
 
protected void onPostExecute(String result) {
Log.d("ChatScreen", result);
Toast.makeText(ChatScreen.this, result, LENGTH_SHORT).show();
}
}
But I'm getting NPE...
I don't know how to get background-image url of an i class using JavaScript... I can find plenty of examples on web for how to get it for div using ids
HTML structure of page is similar to this:
<div ....>
<div ....>
<i class="img profimage" style="background-image: url("url here");"/>
</div>
</div>

Check this Answer may be this will work but I didn't try this. The JS function is written bellow in evaluateJavascript() which will read style attribute then you can use substring method to get the URL.
webview.evaluateJavascript(
"(function() { return (document.getElementsByTagName('i')[index].getAttribute('style')); })();",
new ValueCallback<String>() {
#Override
public void onReceiveValue(String html) {
Log.d("HTML", html);
// now use substring to get url.....
}
});
Hope this help you.

Referencing this answer, you could try something like below (assuming it's the only/first element with the class profimage, otherwise change the index, i.e. [n], where n is the index). Alternatively, just give the element a unique id and use document.getElementById('imgid') and remove the [0]. Wrapped it in a function in case you want to call it on a specific event.
function getUrl() {
var img = document.getElementsByClass('profimage'),
style = img[0].currentStyle || window.getComputedStyle(img[0], false),
bi = style.backgroundImage.slice(5, -2);
return bi;
}
Slicing will remove url(" before and ") after the URL itself. Note that this returns the full url.
If that doesn't work, you can try style = img.style, in lieu of the longer expression in the code above, since the background image is added with inline css in the element itself (<i ... style="background-image: url("url here");"/>). This will return the url in the inline style, in this case url here.

How to inject webkitRequestFullscreen() into UWP WebView

I have a WebView control in a UWP app which loads a Steam broadcast page URL. It works well and I also have a full-screen button to switch the whole window to full screen.
But the Steam broadcast has its own full-screen toggle button, which I would like to click programmatically so that when I press my full screen button, both the window and the broadcast are switched to full screen.
I tried to achieve this via JS injection, but it seems that the webkitRequestFullscreen() function only responds if it's called inside an event handler. How can I inject an event handler into the WebView and call it?
Here's the XAML:
<Grid Background="{StaticResource AppBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<WebView Grid.Row="0" x:Name="Browser" />
<CommandBar x:Name="WatchCommandBar" Grid.Row="1" FlowDirection="LeftToRight">
<AppBarButton Icon="FullScreen" Label="Full Screen" Tapped="AppBarFullScreenButton_Tapped" />
</CommandBar>
</Grid>
And here's the C#:
private void AppBarFullScreenButton_Tapped(object sender, RoutedEventArgs e)
{
var view = ApplicationView.GetForCurrentView();
if (view.IsFullScreenMode)
{
view.ExitFullScreenMode();
WatchCommandBar.Visibility = Visibility.Visible;
}
else
{
view.TryEnterFullScreenMode();
WatchCommandBar.Visibility = Visibility.Collapsed;
}
}
I've tried calling these functions when switching to full-screen, but neither of them work:
await Browser.InvokeScriptAsync("eval", new [] { "BroadcastWatch.m_playerUI.ToggleFullscreen();" });
await Browser.InvokeScriptAsync("eval", new [] { "document.getElementById('videoplayer').webkitRequestFullscreen();" });

Apparently it's not possible to inject the full screen request. And I wasn't able to spoof the mouse click event that would theoretically make the request either.
As a workaround I ended up hiding and styling elements that I did not want to see by injecting this script when the WebView has finished loading:
private async void Browser_HideElements(object sender, WebViewDOMContentLoadedEventArgs args)
{
try
{
var elementsToHide = "#global_header, #footer_spacer, #footer_responsive_optin_spacer, #footer, #ChatWindow, .BroadcastInfoWrapper, .fullscreen_button";
// Hide HTML elements and change styles so it looks like the broadcast is in full-screen
// We can't call the broadcast's own toggle full-screen function
var lines = new[]
{
"document.body.style.overflow = 'hidden';",
"document.getElementById('video_wrapper').className += ' fullscreen';",
"document.getElementById('video_content').style.padding = 0;",
"document.getElementById('video_content').style.margin = 0;",
"document.getElementsByClassName('pagecontent')[0].style.padding = 0;",
"var list = document.querySelectorAll('" + elementsToHide + "');",
"for (var i = 0; i < list.length; i++) { var e = list[i]; e.style.display = 'none'; }"
};
await Browser.InvokeScriptAsync("eval", new[] { string.Join(" ", lines) });
}
catch
{
// Ignore script exceptions
}
}
So it looks like the broadcast is running in full screen, and when my own button is pressed, the title bar disappears and it goes into proper full screen.

Awesomium .NET. Wpf. TitleChanged event

I have a very basic application, that shows website content within the WPF app. Everything works fine, except TitleChangedEvent. Here is the code sample (XAML):
<Window xmlns:awe="http://schemas.awesomium.com/winfx" x:Class="ShopChat.Desktop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:webControls="clr-namespace:System.Web.UI.WebControls;assembly=System.Web"
Title="{Binding ElementName=WebControl, Path=Title}" MinHeight="480" MinWidth="640">
<Grid>
<awe:WebControl x:Name="WebControl"/>
</Grid>
And this is main window code-behind:
public MainWindow()
{
InitializeComponent();
string url = #"http://shopchat.dev";
try
{
url = ConfigurationManager.AppSettings.Get("Url");
}
catch (Exception)
{
}
WebControl.Source = new Uri(url);
WebControl.TitleChanged += WebControl_OnTitleChanged;
this.WindowTitle = "Quickchat";
}
public string WindowTitle
{
get { return (string)GetValue(WindowTitleProperty); }
set { SetValue(WindowTitleProperty, value); }
}
// Using a DependencyProperty as the backing store for WindowTitle. This enables animation, styling, binding, etc...
public static readonly DependencyProperty WindowTitleProperty =
DependencyProperty.Register("WindowTitle", typeof(string), typeof(MainWindow), new PropertyMetadata(null));
private void WebControl_OnTitleChanged(object sender, TitleChangedEventArgs e)
{
this.WindowTitle = e.Title;
}
I've also tried to bind to window title directly using Binding ElementName=WebControl. That didn't help me either.
JavaScript client code is very simple: it changes the document title on timer (setInterval).
What am I doing wrong?

try like this code
public MainWindow()
{
InitializeComponent();
DataContext = this;
MyTitle = "Title";
}
Then you just need in the XAML
Title="{Binding MyTitle}"
Then you don't need the dependency property.
Then I would like to use this INotifyPropertyChanged with a standard property.

The issue was solved. TitleChanged event seemed to be insufficient. I've incorporated the usage of global js object to get the necessary behavior.

How to catch element click by ID in Android webview?

I have the viewPager component which is containing the several webviews with HTML content from remote server.
Is it simple HTML code without possibility to change the HTMl output on the server side.
I would like to ask, how can i catch the click(tap) event on the specified element with the given ID in Android?
ViewPager
private void initViewPager() {
pager = (ViewPager) findViewById(R.id.my_pager);
adapter = new FragmentStatePagerAdapter(
getSupportFragmentManager()
) {
#Override
public int getCount() {
// This makes sure getItem doesn't use a position
// that is out of bounds of our array of URLs
Logger.d(String.valueOf(mWelcomeController.loadedPagesToDisplay.size()));
return mWelcomeController.loadedPagesToDisplay.size();
}
#Override
public android.support.v4.app.Fragment getItem(int position) {
Logger.d(mWelcomeController.loadedPagesToDisplay.toString());
return BrowserFragment.newInstance(
mWelcomeController.loadedPagesToDisplay.get(position)
);
}
};
//Let the pager know which adapter it is supposed to use
pager.setAdapter(adapter);
}
Because I cannot modify the HTML output on the server side (maybe inject some attributes into DOM on device ?) I cannot use something like that:
http://www.scriptscoop.com/t/21b53b896c9e/javascript-how-to-detect-button-click-in-webview-android.html
Detect click on HTML button through javascript in Android WebView.
I would like just something like this:
Find the given element in the HTML code
Update the HTML code (add
onclick event)
Catch this event in native code

For that you need to parse the html, a good html parser for Java (and therefor also Android) is Jsoup.
You can do something like:
// Connect to the web site
Document doc = Jsoup.connect(url).get();
Element button = doc.select("#buttonid");
button.html("new stuff here");
//parse back and put in webview
String finaloutput = doc.html();

1.
// setting
wv.addJavascriptInterface(new MyJsToAndroid(),"my");
WebSettings settings = wv.getSettings();
settings.setJavaScriptEnabled(true);
2.
// JsCallBack
class MyJsToAndroid extends Object{
#JavascriptInterface
public void myClick(String idOrClass) {
Log.d(TAG, "myClick-> " + idOrClass);
}
}
3.
// JS--
public static String addMyClickCallBackJs() {
String js = "javascript:";
js += "function myClick(event){" +
"if(event.target.className == null){my.myClick(event.target.id)}" +
"else{my.myClick(event.target.className)}}";
js += "document.addEventListener(\"click\",myClick,true);";
return js;
}
4.
#Override
public void onPageFinished(WebView wv, String url) {
//...
wv.evaluateJavascript(addMyClickCallBackJs(),null);
//...
}
So, look at the 2 log.