locked
WP 8.1 RT 中,如何用WebView控件按满屏的大小显示Html数据? RRS feed

  • 问题

  • 大家好,是这样的:

    在WP8.1 RT中,我用HttpClient获取某网页中的一篇文章(返回的是一个Html片段,图文并茂的),然后我用完整html将这个html片段封装了一下:

    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
    <meta name='viewport' content='width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/>
    <title></title>
    </head>
    <body>
    <!-- 我将Html片段内容放到此处 -->
    </body>

    最后用WebView将它显示出来:

    webView1.NavigateToString(html);


    但是现在问题来了:
    问题1:由于html片段有大图片,或长的英文连接,所以整个html内容宽度超过WebView宽度,有横向滚动条,并且可以通过手势放大缩小页面(一松手,页面又回到1:1大小),因为阅读类的应用加个横向滚动条体验很不好,所以我不想让WebView出现横向滚动条,让里面的图片自动缩放到1:1的比例,并且不能通过手势放大缩小,我该如何做?

    问题2:网页中有很多实体字符(诸如【&XXXX;或&#XXXX;】之类的),我查了下相关资料这样的字符非常多,WP8.1 RT中有没有现成的方法将这些实体字符转为Text的,因为将html显示在TextBlock中的话,这些实体字符挺难看的,

    问题3:在html中写了【user-scalable=no】,但是还是可以手势放大缩小,只是一松手就大小就又回去了,我能不能禁用这个特性?

    2014年12月2日 4:53

答案

  • 你好,

    >>所以我不想让WebView出现横向滚动条,让里面的图片自动缩放到1:1的比例,并且不能通过手势放大缩小,我该如何做?

    有个解决方案是使用JQuery去设置图片高度以适应容器,要使得无法缩放,可以使用-ms-content-zooming属性:http://msdn.microsoft.com/en-us/library/ie/hh771891%28v=vs.85%29.aspx

    <style>
            html, body
            {
                -ms-content-zooming:none;
            }
    
            * {
                padding: 0;
                margin: 0;
            }
    
            .fit { /* set relative picture size */
                max-width: 100%;
                max-height: 100%;
            }
    
            .center {
                display: block;
                margin: auto;
            }
    </style>


    以下是使用Jquery去调整图片高度的代码:

    <img class="center fit" src="http://res1.windows.microsoft.com/resbox/en/windows/main/8b27c8e1-f430-428b-ba4d-0648687f6d47_4.jpg">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" language="JavaScript">
            function set_body_height() {
                // set body height = window height var wh = $(window).height();
                $('body').height(wh);
            }
    
            $(document).ready(function () {
                set_body_height();
                $(window).bind('resize', function () { set_body_height(); });
            });
    </script>


    测试截图:


    >>WP8.1 RT中有没有现成的方法将这些实体字符转为Text的,因为将html显示在TextBlock中的话,这些实体字符挺难看的

    我们需要使用WebUtility.HtmlDecode方法去解码这些网页的特殊字符:http://msdn.microsoft.com/en-us/library/system.net.webutility.htmldecode(v=vs.110).aspx

    我这边测试截图:


    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.

    • 已标记为答案 jesse hao 2014年12月3日 7:44
    2014年12月3日 7:16
    版主

全部回复

  • 你好,

    >>所以我不想让WebView出现横向滚动条,让里面的图片自动缩放到1:1的比例,并且不能通过手势放大缩小,我该如何做?

    有个解决方案是使用JQuery去设置图片高度以适应容器,要使得无法缩放,可以使用-ms-content-zooming属性:http://msdn.microsoft.com/en-us/library/ie/hh771891%28v=vs.85%29.aspx

    <style>
            html, body
            {
                -ms-content-zooming:none;
            }
    
            * {
                padding: 0;
                margin: 0;
            }
    
            .fit { /* set relative picture size */
                max-width: 100%;
                max-height: 100%;
            }
    
            .center {
                display: block;
                margin: auto;
            }
    </style>


    以下是使用Jquery去调整图片高度的代码:

    <img class="center fit" src="http://res1.windows.microsoft.com/resbox/en/windows/main/8b27c8e1-f430-428b-ba4d-0648687f6d47_4.jpg">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" language="JavaScript">
            function set_body_height() {
                // set body height = window height var wh = $(window).height();
                $('body').height(wh);
            }
    
            $(document).ready(function () {
                set_body_height();
                $(window).bind('resize', function () { set_body_height(); });
            });
    </script>


    测试截图:


    >>WP8.1 RT中有没有现成的方法将这些实体字符转为Text的,因为将html显示在TextBlock中的话,这些实体字符挺难看的

    我们需要使用WebUtility.HtmlDecode方法去解码这些网页的特殊字符:http://msdn.microsoft.com/en-us/library/system.net.webutility.htmldecode(v=vs.110).aspx

    我这边测试截图:


    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.

    • 已标记为答案 jesse hao 2014年12月3日 7:44
    2014年12月3日 7:16
    版主
  • 您好,我使用的是:webView1.NavigateToString((html))的方式加载html内容,

    我发现,html中的脚本并不执行:

    <script type='text/javascript'>
    alert('3');
    </script>

    我将以上脚本加入html的head标签中(位于title之后),发现并不弹出消息框,何故?
    2014年12月4日 9:10
  • 您好,我使用的是:webView1.NavigateToString((html))的方式加载html内容,

    我发现,html中的脚本并不执行:

    <script type='text/javascript'>
    alert('3');
    </script>

    我将以上脚本加入html的head标签中(位于title之后),发现并不弹出消息框,何故?

    你好,

    对于这个问题,请开新帖,方便论坛交流,感谢理解:)


    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.

    2014年12月4日 9:49
    版主
  • 您好:

    在您的测试用例中可以执行脚本,但我这里却无法执行,我已另开主题,希望您能帮我解答:

    https://social.msdn.microsoft.com/Forums/zh-CN/2a9f92ca-a4a7-4df6-9d7b-42978a1b4825/wp81rt-webview?forum=windowsphonezhchs

    或者,您能将您测试的项目打包发给我看看吗?
    jesse51076008@hotmail.com
    2014年12月5日 5:25