我想要更改webview里本地html的字体大小、图片wrap，想参照博客园uap里的代码请问如何改？

Question

博客园-uap里使用下面这个函数完成字体大小设置、图片大小调整。我想把它迁移到我的app webview里。但我使用的是本地html文件，下面代码中的content是博客园-uap作者从cloudAPI里获取的，我想问一下本地html如何获取content。作者的content使用下面第二个函数 GetPostContentAsync(string postid)获取的，似乎是html 文件的 body 部分。非常感谢回答！

        private async void wv_WebContent_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
         {
             try
             {
                 var newSize = CNBlogSettings.Instance.FontSize / 100 + 1;


                await this.wv_WebContent.InvokeScriptAsync("changeFontSize", new[] { newSize.ToString() });


                var text = Windows.Data.Html.HtmlUtilities.ConvertToText(content);


                // fill post content using javascript
                 await this.wv_WebContent.InvokeScriptAsync("setContent", new[] { content });
             }
             catch (Exception ex)
             {
                 // invoke script may cause exception
                 System.Diagnostics.Debug.WriteLine("exception when set post content", ex.Message);
             }
             FunctionHelper.Functions.RefreshUIOnDataLoaded(this.pb_Top, this.cmdBar);
         }


        public async Task<RequestResult<string>> GetPostContentAsync(string postid)
         {
             var apiWithParameter = string.Format("post/body/{0}", postid);
             var url = CombineUrl(apiWithParameter);


            return await RequestData<string>(url, xml =>
             {
                 var xmlDoc = XDocument.Parse(xml);



                // the content of root the is post body
                 return xmlDoc.Root.Value;
             });
         }

----------------------------------------------------------------------------------------------------------------------

js中的setcontent函数，可能有帮助

function setContent(content) {
     var contentDiv = document.getElementById("cnblogs_post_body");


    contentDiv.innerHTML = content;


    var codeDivs = document.getElementsByClassName("cnblogs_code_hide");


    // show codes
     if (codeDivs) {
         for (var i = 0; i < codeDivs.length; i++) {
             codeDivs[i].style.display = "block";
         }
     }


    // hide + and "View Code"
     var collapesImages = document.getElementsByClassName("code_img_closed");


    if (collapesImages) {
         for (var i = 0; i < collapesImages.length; i++) {
             collapesImages[i].style.display = "none";
         }
     }


    var titleDivs = document.getElementsByClassName("cnblogs_code_collapse");


    if (titleDivs) {
         for (var i = 0; i < titleDivs.length; i++) {
             titleDivs[i].style.display = "none";
         }
     }


    // wrap img
     $("#cnblogs_post_body img").each(function (index, element) {
         $(element).replaceWith("<div class='imgGrid'><div class='imgtable'><div class='imgtable-cell'>" +
            element.outerHTML + "</div></div></div>");
     });


    // remove custom style
     $("span[style]:not(pre span), p[style]").each(function (index, element) {
         element.style.removeProperty('color');
         element.style.removeProperty('font-size');


    });
 }

Answer 1

您好，
这里的函数 GetPostContentAsync(string postid)是通过Uri获取的数据。 
如果您想实现字体大小设置和图片大小调整,仍然可以使用DOM的方法,但是要保证本地html所使用的script是存在的。
如果script不是您本地的,既然html是存在在本地,您可以尝试使用StorageFile.GetFileFromApplicationUriAsync和storagefile.FileIO.ReadTextAsync方法.
详细信息请参考:https://msdn.microsoft.com/zh-cn/library/windows/apps/windows.storage.pathio.readtextasync.aspx .
将本地的html转换成sting，之后再检索您所需要content，或者修改属性实现字体、图片大小调整.

Best Regards,
Amy Peng

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

我本来只是希望图片大小能够自动适应手机屏幕，后来发现css里面图片大小可以设置为100%,auto就解决了。非常感谢！我没有html方面的知识，感谢回答。