The corresponding web pages are not loading when the link is tapped in Xamarin forms

Question

The corresponding web pages are not loading when the link is tapped in Xamarin forms

Sakshi Poojary 100

In my Xamarin forms project, we show the HTML data on the UI using a webview.

Using below code I am showing html content on UI:

var htmlSource = new HtmlWebViewSource();
htmlSource.Html = description;//HTML Content
web_view.Source = htmlSource;

My HTML Content is uploaded as a file here.

We have a few href links on the content, and if we tap on them, the corresponding web page we need to open. Currently if I tap nothing is happening.

If the data tapping is impossible, is there any way to get the href links only as a list?

Locked Question. You can vote on whether it's helpful, but you can't add comments or replies or follow the question.

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

1 answer

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Answer 1

Hello,

For Android platform, you can do this by adding custom renderer for your webview and set SetSupportMultipleWindows to false. Then you can open the url when you click the hyper-link.

assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebviewRenderer))]
namespace HTMLandWebview.Droid
{
    public class MyWebviewRenderer : WebViewRenderer
    {
        public MyWebviewRenderer(Context context) : base(context)
        {
        }
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {             
                Control.Settings.SetSupportMultipleWindows(false);
            }
        }
    }
}

By the way, I use your html code like following code-snap.

    var htmlSource = new HtmlWebViewSource();
            htmlSource.Html = @"<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>A quiz on this Lent bible story can be&nbsp;<a href=""https://www.catholicbrain.com/edu-video/51274/quiz/920614/lent-36---the-parable-of-the-tenant-farmers"" target=""_blank"">found here</a>.</p>
\r\n\r\n
<center>
<h4>Take the 40 Day Bible Journey Challenge!</h4>
</center>
\r\n
<center>
<h4>Day 31 - Zerubbabel Rebuilds the Temple </h4>
</center>
\r\n
<div class=""video-responsive""><iframe src=""https://player.vimeo.com/video/434426534"" width=""640"" height=""360"" frameborder=""0"" webkitallowfullscreen="""" mozallowfullscreen="""" allowfullscreen=""""></iframe></div>
\r\n
<p>A quiz on this bible story can be&nbsp;<a href=""https://www.catholicbrain.com/edu-video/1266144/quiz/1266164/day-31---zerubbabel-rebuilds-the-temple"" target=""_blank"">found here</a>.</p>
\r\n\r\n
<center>
<h4>Enjoy our ongoing daily Bible series.</h4>
</center>
\r\n
<center>
<h4>Old Testament 88 - Samson Dies </h4>
</center>
\r\n
<div class=""video-responsive""><iframe src=""https://player.vimeo.com/video/323838087"" width=""640"" height=""360"" frameborder=""0"" webkitallowfullscreen="""" mozallowfullscreen="""" allowfullscreen=""""></iframe></div>
\r\n
<p>A quiz on this Old Testament bible story can be&nbsp;<a href=""https://www.catholicbrain.com/edu-video/811434/quiz/812674/ot-088---samson-dies"" target=""_blank"">found here</a>.</p>
</body>
</html>";
            web_view.Source = htmlSource;

For iOS platform, it is working.

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.