javascript - WebView 在 android 上无法正常工作

Question

我的问题是我的 webview 将包含 turn.js 的 html 呈现为纯文本，即使我为 webview 启用了 javascript 和插件，

webView.getSettings().setJavaScriptEnabled(true); 
webView.getSettings().setPluginsEnabled(true);

我的清单中也声明了互联网许可

<uses-permission android:name="android.permission.INTERNET" />

我会错过什么？请注意，它在默认浏览器中工作正常

编辑
android 代码

package com.dwaik.turn;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class TurnjsActivity extends Activity {
    private WebView webView;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        webView = (WebView) findViewById(R.id.webView1);
        //webView.loadUrl("file:///android_asset/turnjs4/samples/double-page/index.html");
        webView.loadUrl("file:///android_asset/book/index.html");
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(false);
        webView.getSettings().setPluginsEnabled(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setHorizontalScrollBarEnabled(false);
        webView.getSettings().setDomStorageEnabled(true);
        }
}

由于 stackoverflow 问题的限制，我修剪了一些 div 的HTML 代码

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <script type="text/javascript" src="js/jquery.min.1.7.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript" src="js/hash.js"></script>
    <script type="text/javascript" src="js/resize.js"></script>
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <link rel="stylesheet" type="text/css" href="Contents//StyleSheets/book_female.css"/><link rel="stylesheet" type="text/css" href="Contents//StyleSheets/book.css"/><link rel="stylesheet" type="text/css" href="Contents//StyleSheets/font.css"/>
    <link rel="stylesheet" type="text/css" href="Contents/StyleSheets/book.css" />
    <link rel="stylesheet" type="text/css" href="Contents/StyleSheets/font.css" />
</head>
<body>
<div id="canvas">
<div id="book-zoom">
<div class="sj-book">
<div>
    <div class="pagebg RS-01-A1-1_frontcover">

    </div>
</div><div>
    <div class="pagebg RS-01-A1-3_frontcover">

    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P01">
        <div class="P01_D1 ipad">للصف الأول الابتدائي</div>
        <div class="P01_D2 cRed ipad">الفصل الدراسي الأول</div>
        <div class="P01_D3 cGreen ipad">كتاب الطالب</div>
        <div class="P01_D4 ipad">قام بالتأليف والمراجعة</div>
        <div class="P01_D5 ipad">فريق من المتخصصين</div>
        <div class="P01_D6 ipad">طبعة  ١٤٢٢ –  ١٤٢٤ هــ</div>
        <div class="P01_D7 ipad"> ٢٠١٢  –٢٠١٣م&lt;/div>
    </div>
</div><div>
    <div class="pagebg RS-01-A1-3_P01">
        <div class="P01_D1 ipad">للصف الأول الابتدائي</div>
        <div class="P01_D2 cRed ipad">الفصل الدراسي الأول</div>
        <div class="P01_D3 cGreen ipad">كتاب الطالب</div>
        <div class="P01_D4 ipad">قام بالتأليف والمراجعة</div>
        <div class="P01_D5 ipad">فريق من المتخصصين</div>
        <div class="P01_D6 ipad">طبعة  ١٤٢٢ –  ١٤٢٤ هــ</div>
        <div class="P01_D7 ipad"> ٢٠١٢  –٢٠١٣م&lt;/div>
    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P02">
        <div class="P02_D1 ipad"> وزارة التربية والتعليم ، ١٤٣٠ هـ</div>
        <div class="P02_D2 ipad"><span class="bFontWt">فهرسة مكتبـة الملـك فهد الوطنيـة أثنـاء النـشـر
<br>وزارة التـربيـة والتعلـيـم</span><br>الفقه والسلوك للصف الأول الابتدائي &#58; الفصل الدراسي الأول &#58;<br>كتاب الطالب. / وزارة التربية والتعليم.  - الرياض ، ١٤٣٠هـ.<span class="bFontWt"><br>٣٦ ص ؛ ٢٦x٢١ سم<br>ردمـك &#58; ٩ - ٤٢٥ - ٤٨ - ٩٩٦٠ - ٩٧٨</span><br>١ ـ  الفقه الإسلامي  ـ  كتب دراسيـة    ٢ ـ  التعليم الابتدائي   ـ  السعوديـة<br>ـ  كتب دراسيـة.      أ  ـ  العنوان<br><span class="bFont">  ديـوي ٠٧١١، ٢٥٢&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;٥١٣٣ / ١٤٢٨</span>

        </div>
        <div class="P02_D3 ipad">رقم الإيداع &#58; ٥١٣٣ / ١٤٢٨<br>ردمك &#58; ٩ - ٤٢٥ - ٤٨ - ٩٩٦٠ - ٩٧٨</div>
        <div class="P02_D4 ipad">لهذا المقرر قيمة مهمة وفائدة كبيرة فلنحافظ عليه، ولنجعل نظافته تشهد على حسن سلوكنا معه.</div>
        <div class="P02_D5 ipad">إذا لم نحتفظ بهذا المقرر في مكتبتنا الخاصة في آخر العام للاستفادة ، فلنجعل مكتبة مدرستنا تحتفظ به.</div>
        <div class="P02_D6 ipad">حقوق الطبع والنشر محفوظة لوزارة التربية والتعليم ـ المملكة العربية السعودية</div>
        <div class="P02_D7 ipad">موقع <br>موقع<br>موقع <br>بريد </div>
    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P03">

    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P04">

        <div class="P04_D1 ipad">الحمد لله رب العالمين والصلاة والسلام على أشرف الأنبياء والمرسلين نبينا محمد وعلى آله </div>
        <div class="P04_D2 ipad">وصحبه أجمعين&#58; </div>
        <div class="P04_D3 ipad"><span class="bFontWt">أخي الكريم &#58; ولي أمر الطالب</span><br>أما بعد&#58;</div>
        <div class="P04_D4 ipad">فها هو ـ أخي الكريم ـ كتاب الطالب لمادة الفقه والسلوك للصف الأول الابتدائي - الفصل </div>
        <div class="P04_D5 ipad">الدراسي الأول-؛ وهو أحد المنتجات التي تضمنها المشروع الشامل لتطوير المناهج.</div>
        <div class="P04_D6 ipad">وهو كتاب يقرب  إلى ابننا المبارك الأحكام الشرعية وبعض السلوكات والآداب الإسلامية.<br>وقد يسر الله تعالى صياغة موضوعات هذا المقرر بطريقة تتيح للطالب أن يكون نشطًا داخل </div>
        <div class="P04_D7 ipad">الصف؛ مشاركًا في فقرات الدرس مع معلمه وزملائه، مطبقًا لما يمكن تطبيقه داخل الصف أو <br>المدرسة أو المنزل.
        </div>
        <div class="P04_D8 ipad"><span class="bFontWt">وقد راعينا في هذا المؤلف ما يلي&#58;</span><br>
            <span class="bFontWt">أولًا&#58;</span> التنويع في عرض المادة الدراسية.<br>
            <span class="bFontWt">ثانيًا&#58;</span> تقريب المعلومة من خلال&#58; الأشكال المناسبة، والوسائل المتنوعة.<br>
            <span class="bFontWt">ثالثًا&#58;</span> مشاركة الطالب في الدرس.<br>
            <span class="bFontWt">رابعًا&#58;</span> تنمية مهارات التعلم والتفكير التي لدى الطالب في مثل هذه المرحلة.<br> <span class="bFontWt">
أخي الكريم &#58; ولي أمر الطالب</span><br>إنه بقدر متابعتك للابن الكريم، وحرصك عليه، ومواصلتك مع معلم الصف في المدرسة يكون
        </div>
        <div class="P04_D9 ipad">ابننا أكثر انتفاعًا بهذا المقرر الجديد، وأكثر تفاعلًا، وأدق فهمًا، وأصح تطبيقًا بإذن الله تعالى.
        </div>
        <div class="P04_D10 ipad"> وفي ختام هذه المقدمة نذكرك أخي ولي أمر الطالب بأنه من أجل الانتفاع المقصود لابننا العزيز، </div>
        <div class="P04_D11 ipad">ولزيادة فهمه واستيعابه لما يدرسه، أرفق بكتابه هذا كتابُ للنشاط؛ ليعينه على الفهم والتطبيق، <br>وينمي مهارات التفكير لديه؛ فهو خير رفيق لكتاب الطالب الذي بين يديه.

        </div>
        <div class="P04_D12  ipad">والذي نُؤمِلُهُ أن يكون ما يتعلمه عونًا له ومرشدًا ليصل - بإذن الله تعالى - إلى السعادة في الدنيا </div>
        <div class="P04_D13  ipad">والآخرة. رزقك الله العلم النافع والعمل الصالح وسدَّد الله خطاك وبارك في جهودك.</div>



    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P05">

        <div class="P05_D1 cWhite ipad">٧ </div>
        <div class="P05_D2 cWhite ipad">١١ </div>
        <div class="P05_D3 cWhite ipad">١٧</div>
        <div class="P05_D4 cWhite ipad">٢٣ </div>
        <div class="P05_D5 cWhite ipad">٢٩</div>
        <div class="P05_D6 cWhite ipad">٣٣ </div>
        <div class="P05_D7 cWhite ipad">تعظيم القرآن الكريم </div>
        <div class="P05_D8 cWhite ipad">الوحدة الأولى </div>
        <div class="P05_D9 cWhite ipad"> من سيرة نبينا محمد <span class="axtmunaregular">˜</span></div>
        <div class="P05_D10 cWhite ipad">صدقه، أمانته، شجاعته</div>
        <div class="P05_D11 cWhite ipad">الوحدة الثانية </div>
        <div class="P05_D12 cWhite ipad"> السلام</div>
        <div class="P05_D13 cWhite ipad">الوحدة الثالثة </div>
        <div class="P05_D14  cWhite ipad"> بر الوالدين</div>
        <div class="P05_D15 cWhite ipad">الوحدة الرابعة </div>
        <div class="P05_D16 cWhite ipad"> حق المعلم</div>
        <div class="P05_D17 cWhite ipad"> الوحدة الخامسة</div>
        <div class="P05_D18 cWhite ipad">   آداب قضاء الحاجة</div>
        <div class="P05_D19 cWhite ipad">الوحدة السادسة</div>

    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P06">

    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P07 "><div class="P07_D1 ipad">فَشَاهَدَ</div>
        <div class="P07_D2 ipad">   عُمَرُ ذَهَبَ مَعَ وَالِدِهِ إلى</div>
        <div class="P07_D3 ipad">بِرِفْقٍ مِنَ  </div>
        <div class="P07_D4 ipad">  ، أَخَذَ عُمَرُ </div>
        <div class="P07_D5 ipad">طِفْلاً يَعْبَثُ بِــ </div>
        <div class="P07_D6 ipad"> ، جَلَسَ عُمَرُ بِجَانِبِ وَالِدِهِ </div>
        <div class="P07_D7 ipad"> الطِّفْـلِ وَوَضَعَـهُ عَـلَى  </div>
        <div class="P07_D8 ipad">إِلَى قِرَاءَتِه القُرْآنَ الكَرِيمَ .
        </div>
        <div class="P07_D9 ipad"> بِأَدَبٍ وَ </div>
    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P08 bFontWt "><a href="#Media/RS-01-A1-Q-008-01"><img style="position&#58;absolute;right&#58;1%;top&#58;10%;" src="/bookIcons/1/Q.gif" width="100" height="100" /></a>
        <div class="P08_D1 cDarkBlue ipad">أَعُوذُ بِاللهِ مِنَ الشَّيْطَانِ الرَّجِيمِ</div>
        <div class="P08_D2 ipad"> أَقُولُ عِنْدَ قِرَاءَةِ القُرْآنِ&#58;   </div>
        <div class="P08_D3 cDarkBlue ipad">بِسْمِ اللهِ الرَّحْمَنِ الرَّحِيمِِ </div>
        <div class="P08_D4 ipad">  أَقُولُ عِنْدَ أَوَّلِ السُّورَةِ&#58; </div>
        <div class="P08_D5 cDarkBlue ipad">لاَ أَلهُو وَلاَ أَتَكَلَّمُ<br>&#160;&#160;
            أَثْنَاءَ التِّلاَوَةِ. </div>
        <div class="P08_D6 cDarkBlue ipad">أَسْتَمِعُ وَأُنْصِتُ<br>&#160;لِقِرَاءَةِ القُرْآنِ.</div>

    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P09 "><a href="#Media/RS-01-A1-T-009-01"><img style="position&#58;absolute;right&#58;1%;top&#58;10%;" src="/bookIcons/1/T.gif" width="100" height="100" /></a>
        <div class="P09_D1 ipad">أَضَعُ القُرآنَ الكَرِيمَ فِي المَكَانِ اللاَّئِقِ بِهِ. </div>
        <div class="P09_D2 ipad"><span class="cRed">أُلَوِّنُ </span>السُّلُوكَ الصَّحِيحَ بِاللَّوْنِ &#160;&#160;&#160;&#160; والسُّلُوكَ الخَاطِىءَ  باللَّوْنِ &#160;&#160;&#160;&#160;<span class="cRed">&#58;</span></div>
        <div class="P09_D3 ipad">وَضْعُ المُصْحَفِ<br>&#160;&#160;عَلَى الأَرْضِ ِ</div>
        <div class="P09_D4 ipad">الكِتَابَةُ وَالرَّسْمُ <br>
            عَلَى المُصْحَفِ</div>
        <div class="P09_D5 ipad"> قِرَاءَةُ القُرْآنِ&#160;&#160; <br>
            بِصَوْتٍ حَسَنٍ</div>
        <div class="P09_D6 ipad">الاسْتِنَادُ إلَى شَيْءٍ<br>
            &#160;&#160;فِيهِ مُصْحَفٌ</div>

    </div>
</div><div>
    <div class="pagebg RS-01-A1-1_P10 ">
        <div class="P10_D1 ipad"><span class="cDarkBlue">أَخُطُّ</span><span class="cRed"> بِقَلَمِي عَلَى الكَلِمَاتِ المُنَقَّطَة<span style="font-size&#58;20px;">&#58;</span></span></div>
        <div class="P10_D2 ipad"> أَنَا أُحِبُّ</div>
        <div class="P10_D3 ipad"> أَنَا أَقْرَأُ القُرْآنَ الكَرِيمَ</div>
        <div class="P10_D4 ipad"><span class="cRed"> رَأَى </span>أَخِي أَوْرَاقًا مِنَ القُرْآنِ الكَرِيمِ فِي دُرْجِ صَاحِبِهِ.<br>
            <span class="cRed"> أُسَاعِدُ</span> أَخِي فِي اخْتِيَارِ التَّصَرُّفَاتِ الصَّحِيحَةِ&#58;</div>
        <div class="P10_D5 ipad">  يَطْلُبُ مِنْ صَاحِبِهِ أَنْ يُسَلِّمَ الأَوْرَاقَ لِمُعَلِّمِهِ.<br> يَتْرُكُهُ وَشَأْنَهُ.<br> يُذَكِّرُهُ بِمَا تَعَلَّمَهُ مِنْ تَعظيم القُرْآنِ الكَرِيمِ.</div>
        <div class="P10_D6 cRed ipad">  أُلَوِّنُ&#58; ِ</div>


    </div>
</div>
<script type="text/javascript">
    var PageCount = 40;
    var pageRange = "0";
    var webID = "";
    var userID = "";
    var tempKeyWord = "T";
    var FullSize = true;
    function loadApp() {
        loadBook();
        var flipbook = $('.sj-book');
        $('#canvas').css({ visibility: '' });
        Hash.on('^page\/([0-9]*)$', {
            yep: function (path, parts) {
                var page = parts[1];
                if (page !== undefined) {
                    if ($('.sj-book').turn('is'))
                        $('.sj-book').turn('page', page);
                }
            }
        });
        $(document).keydown(function (e) {
            var previous = 37, next = 39, esc = 27;
            switch (e.keyCode) {
                case previous:
                    $('.sj-book').turn('previous');
                    break;
                case next:
                    $('.sj-book').turn('next');
                    break;
                case esc:
                    try { e.preventDefault(); }
                    catch (x) { e.returnValue = false; }
                    break;
            }
        });
        Hash.on('^Media\/([A-Za-z][A-Za-z0-9!-@#$%^&*]*)$', {
            yep: function (path, parts) {
                var Media = parts[1];
                if (Media !== undefined) {
                    if ($('.sj-book').turn('is')) {
                        $("#overlay_form").fadeIn(2000);
                        $("#Background").fadeIn(2000);
                        positionPopup();
                        var pagename = "Media/" + Media + "/index.html";
                        $("#iframemedia").attr("src", pagename);
                        $("#close").click(function () {
                            $("#close").attr("href", "#");
                            $("#iframemedia").attr("src", "");
                            $("#overlay_form").fadeOut(1800);
                            $("#Background").fadeOut(1800);
                        });
                    }
                }
            }
        });
        flipbook.bind(($.isTouch) ? 'touchend' : 'click');
    }
    function loadBook() {
        var bookInitialPages = '';
        var flipbook = $('.sj-book');
        flipbook.turn({
            pages: PageCount + 1, direction: "rtl",
            autoCenter: true,
            duration: 1000
        });
        resizeDiv();
        if (flipbook.width() == 0 || flipbook.height() == 0) {
            setTimeout(loadApp, 10);
            return;
        }
        flipbook.bind('turning', function (e, page) {
            var range = $(this).turn('range', page);
            var book = $(this),
                    currentPage = book.turn('page'),
                    pages = book.turn('pages');
        });
        flipbook.bind('turned', function (e, page) {
            var book = $(this),
                    currentPage = book.turn('page'),
                    pages = book.turn('pages');
            book.turn('center');
            resizeDiv();
        });
    }
    function addPage(page, book) {
        var id, pages = book.turn('pages');
        if (!book.turn('hasPage', page)) {
            var element = $('<div />',
                    {
                        'xclass': 'xown-size',
                        css: { xwidth: 460, xheight: 582 }
                    }).
                    html('<div class="loader">Loading...</div>');
            if (book.turn('addPage', element, page)) {
                loadPage(page, element);
            }
            resizeDiv();
        }
    }
    function loadPage(page, element) {
        $.ajax({ url: 'pages/page' + page + '.html', dataType: 'html', type: 'GET' }).
                done(function (pageHtml) {
                    element.html("<div>" + pageHtml + "</div>");
                });
    }
    $('#canvas').css({ visibility: 'hidden' });
    $(function () {
        yepnope({
            test: Modernizr.csstransforms,
            yep: ['js/turn.min.js'],
            nope: ['js/turn.html4.min.js'],
            both: ['css/BookContainer.css'],
            complete: loadApp
        });
    });
    function positionPopup() {
        if (!$("#overlay_form").is(':visible')) {
            return;
        }
        $("#overlay_form").css({
            left: ($(window).width() - 800) / 2,
            top: 0,
            position: 'fixed',
        });
    }
</script>
</body>
</html>

score 3 · Accepted Answer

您的 HTML 格式不正确 - 缺少结束标记 - 这就是您看到源代码的原因。使用W3C Validator检查您的 HTML 源代码。

并在最后一次 webView.getSettings() 调用之后移动 loadUrl() 调用。

webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);
webView.getSettings().setPluginsEnabled(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setHorizontalScrollBarEnabled(false);
webView.getSettings().setDomStorageEnabled(true);       
// load page after settings 
webView.loadUrl("file:///android_asset/book/index.html");

score 0 · Accepted Answer

This code will work with your problem ..try it.
@Override
public void onScaleChanged(WebView view, float oldScale, float newScale) {
    if (view != null) {
        view.invalidate();
    }
}

javascript - WebView 在 android 上无法正常工作

2 回答 2

Related

Reference