Xamarin.iOS 中的 UIWebView 似乎忽略了外部 CSS 样式? - IT屋-程序员软件开发技术分享社区
首页 移动开发 Xamarin.iOS 中的 UIWebView 似乎忽略了外部 CSS 样式?
Xamarin.iOS 中的 UIWebView 似乎忽略了外部 CSS 样式?
[英] UIWebView in Xamarin.iOS seems to ignore external CSS styles?
本文介绍了Xamarin.iOS 中的 UIWebView 似乎忽略了外部 CSS 样式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 WebView 中显示 HTML 内容时遇到了一个令人不安的问题，我已将 html 内容简化为这样以便于阅读:
<html lang="zh-cn"><头><link href="https://www.paytabs.com/theme/payment_page/css/bootstrap.css" rel="stylesheet" type="text/css"><link href="https://www.paytabs.com/theme/payment_page/css/custom-rtl.css?timestamp=1540717040" rel="stylesheet" type="text/css"><身体><h1 class="text-primary">文本一</h1><a href="www.stackoverflow.com" class="text-primary">StackOverflow</a><div class="容器"><div class="header-title"><h3>Xamarin</h3></div><h3 class="text-success">成功</h3><img src="https://i.stack.imgur.com/PwBYM.jpg?s=328&g=1" alt="图像"/><h1 class="mark">Mark</h1><div class="payment-wrap"><div><label class="payment_method"><input type="radio" id="creditcard" name="payment_type" value="creditcard"><img src="https://www.paytabs.com/images/img/cards.png" width="75" alt="信用卡">
<div class="form-wrap sadad-hide" style="display:none;"><input class="form-control" placeholder="输入用户" value="" maxlength="12" name="olpalias" id="olpalias" autocomplete="off" type="text">
<span class="whats-this sadad-hide" style="display:none;">没有账号?</span><!--Sadad Enable--><div id="pt-sadad-enable-outer"><div id="pt-sadad-enable" class="pt-sadad-enable-wrap pt-arrow"><div class="pt-sadad-enable-inner"><h2>如何激活?</h2><ul class="pt-sadad-htp"><li class="step1 step-help"><图><img class="img-help" src="https://www.paytabs.com/images/sadad/p1.png" width="50" height="32"><figcaption>在线激活</figcaption></图><li class="step2 step-help"><图><img class="img-help" src="https://www.paytabs.com/images/sadad/p2.png" width="48" height="33"><figcaption>创建 sadad 帐户</figcaption></图><li class="step3 step-help"><图><img class="img-help" src="https://www.paytabs.com/images/sadad/p3.png" width="27" height="33"><figcaption>添加到您的帐户</figcaption></图><a href="https://www.sadad.com/ar/Personal/Pages/RegisterNow.aspx" class="pt-sadad-btn" target="_blank">了解更多</a>
<!-- End Sadad Enable Note-->
</html>
这里我设置了webView的Source:
public MainPage(){初始化组件()；webView.Source = 新的 HtmlWebViewSource{Html = Resource1.testHtml//包含上面的HTML};}以下是 Android 上显示的内容(正常):
iPhone:
我尝试使用 WkWebViewRenderer 而不是 UIWebView，方法是在 iOS 项目的 AssembyInfo.cs 文件中添加:
[程序集:ExportRenderer(typeof(WebView), typeof(Xamarin.Forms.Platform.iOS.WkWebViewRenderer))]但这只是缩小了页面大小:
有什么帮助吗?
解决方案
原因: 从 iOS 9 开始，iOS 将只允许您的应用程序默认与实现最佳实践安全性的服务器进行通信.必须在 Info.plist 中设置值以启用与不安全服务器的通信.
解决方案: 在您的 info.plist 中添加以下代码以信任您的域.
NSAppTransportSecurity <字典><key>NSExceptionDomains</key><字典><key>www.paytabs.com</key><字典><key>NSExceptionRequiresForwardSecrecy</key><假/><key>NSExceptionAllowsInsecureHTTPLoads</key><真/><key>NSIncludesSubdomains</key><真/></dict></dict>
有关更多详细信息，您可以访问此 文档
I'm facing a disturbing problem with showing HTML content in WebView, I've simplified the html content to this for easier reading:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://www.paytabs.com/theme/payment_page/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="https://www.paytabs.com/theme/payment_page/css/custom-rtl.css?timestamp=1540717040" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="text-primary">text one</h1>
<a href="www.stackoverflow.com" class="text-primary">StackOverflow</a>
<div class="container">
<div class="header-title"><h3>Xamarin</h3></div>
</div>
<h3 class="text-success">Success</h3>
<img src="https://i.stack.imgur.com/PwBYM.jpg?s=328&g=1" alt="image"/>
<h1 class="mark">Mark</h1>
<div class="payment-wrap">
<div>
<label class="payment_method">
<input type="radio" id="creditcard" name="payment_type" value="creditcard">
<img src="https://www.paytabs.com/images/img/cards.png" width="75" alt="Credit Card">
</label>
</div>
<div class="form-wrap sadad-hide" style="display:none;">
<input class="form-control" placeholder="Enter user" value="" maxlength="12" name="olpalias" id="olpalias" autocomplete="off" type="text">
</div>
<span class="whats-this sadad-hide" style="display:none;">Don't have account?</span>
<!--Sadad Enable-->
<div id="pt-sadad-enable-outer">
<div id="pt-sadad-enable" class="pt-sadad-enable-wrap pt-arrow">
<div class="pt-sadad-enable-inner">
<h2>How to activate?</h2>
<ul class="pt-sadad-htp">
<li class="step1 step-help">
<figure>
<img class="img-help" src="https://www.paytabs.com/images/sadad/p1.png" width="50" height="32">
<figcaption>Activate online</figcaption>
</figure>
</li>
<li class="step2 step-help">
<figure>
<img class="img-help" src="https://www.paytabs.com/images/sadad/p2.png" width="48" height="33">
<figcaption>Create sadad account</figcaption>
</figure>
</li>
<li class="step3 step-help">
<figure>
<img class="img-help" src="https://www.paytabs.com/images/sadad/p3.png" width="27" height="33">
<figcaption>Add to your account</figcaption>
</figure>
</li>
</ul>
<a href="https://www.sadad.com/ar/Personal/Pages/RegisterNow.aspx" class="pt-sadad-btn" target="_blank">learn more</a>
</div>
</div>
</div>
<!-- End Sadad Enable Note-->
</div>
</body>
</html>
And here I set the Source of the webView:
public MainPage()
{
InitializeComponent();
webView.Source = new HtmlWebViewSource
{
Html = Resource1.testHtml //containing the HTML above
};
}
Here's what's shown on Android (normal):
iPhone:
I tried to use WkWebViewRenderer instead of UIWebView, by adding this in the AssembyInfo.cs file of the iOS project:
[assembly: ExportRenderer(typeof(WebView), typeof(Xamarin.Forms.Platform.iOS.WkWebViewRenderer))]
But this just shrunk the page size:
Any help?
解决方案
cause:
Since iOS 9, iOS will only allow your application to communicate with servers that implement best-practice security by default. Values must be set in Info.plist to enable communication with insecure servers.
Solution:
Add the following code in your info.plist to trust your domain.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>www.paytabs.com</key>
<dict>
<key>NSExceptionRequiresForwardSecrecy</key>
<false/>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
</dict>
For more detail you can access this document
这篇关于Xamarin.iOS 中的 UIWebView 似乎忽略了外部 CSS 样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
