代码之家  ›  专栏  ›  技术社区  ›  mshwf

Xamarin.iOS中的UIWebView似乎忽略了外部CSS样式?

  •  0
  • mshwf  · 技术社区  · 7 年前

    我面临着一个令人不安的问题,显示HTML内容在 WebView

    <!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>

    在这里我设置了 Source webView :

     public MainPage()
            {
                InitializeComponent();
                webView.Source = new HtmlWebViewSource
                {
                    Html = Resource1.testHtml //containing the HTML above
                };
            }
    

    以下是Android上显示的内容(正常): enter image description here

    苹果手机:

    enter image description here enter image description here

    WkWebViewRenderer 而不是 UIWebView ,通过在iOS项目的AssembyInfo.cs文件中添加以下内容:

    [assembly: ExportRenderer(typeof(WebView), typeof(Xamarin.Forms.Platform.iOS.WkWebViewRenderer))] 
    

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  0
  •   Tako    7 年前

    原因: 从ios9开始,iOS只允许应用程序与默认情况下实现最佳实践安全性的服务器通信。必须在Info.plist中设置值才能启用与不安全服务器的通信。

    解决方案: 将以下代码添加到 info.plist 信任你的域名。

    <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>
    

    document

    推荐文章