Xamarin Forms - IOS、脚本和样式不调用答案

【问题标题】：Xamarin Forms - IOS , Scripts and styles are not callingXamarin Forms - IOS、脚本和样式不调用
【发布时间】：2017-09-02 08:06:48
【问题描述】：

我正在开发使用混合 WebView 调用 HTML 页面、样式和脚本的 Xamarin 表单 IOS 应用程序。我无法渲染样式和脚本，我的代码是

HybridWebViewRenderer.cs

    protected override void OnElementChanged (ElementChangedEventArgs<HybridWebView> e)
    {
        base.OnElementChanged (e);

        if (Control == null) {
            userController = new WKUserContentController ();
            var script = new WKUserScript (new NSString (JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
            userController.AddUserScript (script);
            userController.AddScriptMessageHandler (this, "invokeAction");

            var config = new WKWebViewConfiguration { UserContentController = userController };
            var webView = new WKWebView (Frame, config);
            SetNativeControl (webView);
        }

        if (e.OldElement != null) {
            userController.RemoveAllUserScripts ();
            userController.RemoveScriptMessageHandler ("invokeAction");
            var hybridWebView = e.OldElement as HybridWebView;
            hybridWebView.Cleanup ();
        }

        if (e.NewElement != null) {
            string fileName = Path.Combine (NSBundle.MainBundle.BundlePath, string.Format ("Content/{0}", Element.Uri));

           //fileName = "/var/containers/Bundle/Application/2DC89563-D118-4092-B7A5-4549AF07F3B2/StoneApplication.iOS.app/Content/index.html"

            Control.LoadRequest (new NSUrlRequest (new NSUrl (fileName, false)));
        }
    }

    public void DidReceiveScriptMessage (WKUserContentController userContentController, WKScriptMessage message)
    {
        Element.InvokeAction (message.Body.ToString ());
    }

还有我的 index.html，我在这里调用脚本、图像和样式

<html>
<head>
<title>STONEAPP TEMPLATE</title>
<!--Scripts-->
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/fileServer.js"></script>
<script src="/Scripts/fileupload.js"></script>
<script src="/Scripts/ng-cordova.js"></script>
<script src="/Scripts/app.js"></script>

<!--Styles-->
<link href="/Styles/bootstrap.css" rel="stylesheet"/>
<link href="/Styles/main.css" rel="stylesheet"/>
</head>
<body ng-app="stoneApp" style="background-color: #ffffff;">
<div ng-controller="templateCtrl">
    <div id="Header" style="background-color:#293846;min-height:50px">
        <table style="width:100%;padding-top:5px;padding-left:5px;padding-right:5px">
            <tr>
                <td align="center" width="5%" valign="middle" ng-if="jobView == true" ng-click="showActList()">
                    <img src="/Images/arrow-back.png" alt="" style="height:50px;width:50px"/>
                </td>
                <td align="center" width="5%" valign="middle">
                    <img src="/Images/wifi_on.png" alt="" style="height:50px;width:50px" ng-click="ShowWifiSettings()"/>
                </td>
                <td align="center" width="5%" valign="middle" ng-click="ShowTabSettings()">
                    <img src="/Images/settings.png" alt="" style="height:50px;width:50px" ng-if="loginView == false"/>
                </td>
                <td width="5%" valign="middle" ng-if="activityView == true"></td>
                <td width="60%" valign="middle"></td>
                <td width="20%" valign="middle" align="right">
                    <span style="color:white" ng-if="loginView == false">{{userName}} !</span>
                </td>
                <td width="5%" align="right" valign="middle" ng-click="logout()" >
                    <img src="/Images/power_button.png" style="height:50px;width:50px" ng-if="loginView == false"/>
                </td>
            </tr>
        </table>
    </div>
  </div>
  </body>

我将构建操作作为样式和脚本的捆绑资源提供，即使我无法调用样式和脚本并且程序结构与附加图像一样。

我使用的是 iOS 10.2 平板电脑。如何调查我的问题并将脚本样式和图像作为 HTML 页面中给出的链接调用？

【问题讨论】：

标签： xamarin xamarin.ios xamarin.forms

【解决方案1】：

Control.LoadRequest 无法做到这一点

你的问题是你不能用这个方法为你的 webview 定义 baseUrl 并且没有其他方法可以让你定义它。因此，当您的 index.html 加载到 webview 中时，webview 无法检索脚本或 css，因为未定义 baseUrl 并且它不知道在哪里加载它们。

解决方法是使用LoadHtmlString (String htmlContent, NSUrl baseUrl)

htmlContent 是您加载到 var 和 baseUrl 中的 index.html 内容NSUrl baseurl = new NSUrl(NSBundle.MainBundle.BundlePath, true);

【讨论】：

嗨@Leze 我这样添加，但没有运气脚本/css/images 没有加载字符串 htmlPath = Path.Combine(NSBundle.MainBundle.BundlePath, string.Format("Content/{0} ", 元素.Uri));字符串 htmlContents = File.ReadAllText(htmlPath); Control.LoadHtmlString(htmlContents, null);
您在 LoadHtmlString 中缺少 baseUrl 参数。尝试这样做string htmlPath = Path.Combine(NSBundle.MainBundle.BundlePath, string.Format("Content/{0}", Element.Uri)); NSUrl baseurl = new NSUrl(NSBundle.MainBundle.BundlePath, true); string htmlContents = File.ReadAllText(htmlPath); Control.LoadHtmlString(htmlContents, baseurl);