Xamarin.iOS中的UIWebView似乎忽略了外部CSS样式? [英] UIWebView in Xamarin.iOS seems to ignore external CSS styles?
问题描述
在 WebView 中显示HTML内容时，我遇到了一个令人不安的问题，为了简化阅读，我将html内容简化为:
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>在这里，我设置 webView 的 Source :
public MainPage()
{
InitializeComponent();
webView.Source = new HtmlWebViewSource
{
Html = Resource1.testHtml //containing the HTML above
};
}
以下是Android(正常)上显示的内容:
Here's what's shown on Android (normal):
iPhone:
通过在iOS项目的AssembyInfo.cs文件中添加以下代码，我尝试使用 WkWebViewRenderer 而不是 UIWebView :
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:
有帮助吗?
推荐答案
原因:从iOS 9开始，iOS将仅允许您的应用程序默认情况下与实现最佳实践安全性的服务器进行通信.必须在Info.plist中设置值才能启用与不安全服务器的通信.
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.
解决方案:在您的 info.plist 中添加以下代码以信任您的域.
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屋！
