我的问题是我的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);
}
}
HTML代码由于stackoverflow问题限制,我修剪了一些div
<!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"> ٢٠١٢ –٢٠١٣م</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"> ٢٠١٢ –٢٠١٣م</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>الفقه والسلوك للصف الأول الابتدائي : الفصل الدراسي الأول :<br>كتاب الطالب. / وزارة التربية والتعليم. - الرياض ، ١٤٣٠هـ.<span class="bFontWt"><br>٣٦ ص ؛ ٢٦x٢١ سم<br>ردمـك : ٩ - ٤٢٥ - ٤٨ - ٩٩٦٠ - ٩٧٨</span><br>١ ـ الفقه الإسلامي ـ كتب دراسيـة ٢ ـ التعليم الابتدائي ـ السعوديـة<br>ـ كتب دراسيـة. أ ـ العنوان<br><span class="bFont"> ديـوي ٠٧١١، ٢٥٢                      ٥١٣٣ / ١٤٢٨</span>
</div>
<div class="P02_D3 ipad">رقم الإيداع : ٥١٣٣ / ١٤٢٨<br>ردمك : ٩ - ٤٢٥ - ٤٨ - ٩٩٦٠ - ٩٧٨</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">وصحبه أجمعين: </div>
<div class="P04_D3 ipad"><span class="bFontWt">أخي الكريم : ولي أمر الطالب</span><br>أما بعد:</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">وقد راعينا في هذا المؤلف ما يلي:</span><br>
<span class="bFontWt">أولًا:</span> التنويع في عرض المادة الدراسية.<br>
<span class="bFontWt">ثانيًا:</span> تقريب المعلومة من خلال: الأشكال المناسبة، والوسائل المتنوعة.<br>
<span class="bFontWt">ثالثًا:</span> مشاركة الطالب في الدرس.<br>
<span class="bFontWt">رابعًا:</span> تنمية مهارات التعلم والتفكير التي لدى الطالب في مثل هذه المرحلة.<br> <span class="bFontWt">
أخي الكريم : ولي أمر الطالب</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:absolute;right:1%;top:10%;" src="/bookIcons/1/Q.gif" width="100" height="100" /></a>
<div class="P08_D1 cDarkBlue ipad">أَعُوذُ بِاللهِ مِنَ الشَّيْطَانِ الرَّجِيمِ</div>
<div class="P08_D2 ipad"> أَقُولُ عِنْدَ قِرَاءَةِ القُرْآنِ: </div>
<div class="P08_D3 cDarkBlue ipad">بِسْمِ اللهِ الرَّحْمَنِ الرَّحِيمِِ </div>
<div class="P08_D4 ipad"> أَقُولُ عِنْدَ أَوَّلِ السُّورَةِ: </div>
<div class="P08_D5 cDarkBlue ipad">لاَ أَلهُو وَلاَ أَتَكَلَّمُ<br>  
أَثْنَاءَ التِّلاَوَةِ. </div>
<div class="P08_D6 cDarkBlue ipad">أَسْتَمِعُ وَأُنْصِتُ<br> لِقِرَاءَةِ القُرْآنِ.</div>
</div>
</div><div>
<div class="pagebg RS-01-A1-1_P09 "><a href="#Media/RS-01-A1-T-009-01"><img style="position:absolute;right:1%;top: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>السُّلُوكَ الصَّحِيحَ بِاللَّوْنِ      والسُّلُوكَ الخَاطِىءَ باللَّوْنِ     <span class="cRed">:</span></div>
<div class="P09_D3 ipad">وَضْعُ المُصْحَفِ<br>  عَلَى الأَرْضِ ِ</div>
<div class="P09_D4 ipad">الكِتَابَةُ وَالرَّسْمُ <br>
عَلَى المُصْحَفِ</div>
<div class="P09_D5 ipad"> قِرَاءَةُ القُرْآنِ   <br>
بِصَوْتٍ حَسَنٍ</div>
<div class="P09_D6 ipad">الاسْتِنَادُ إلَى شَيْءٍ<br>
  فِيهِ مُصْحَفٌ</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:20px;">:</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> أَخِي فِي اخْتِيَارِ التَّصَرُّفَاتِ الصَّحِيحَةِ:</div>
<div class="P10_D5 ipad"> يَطْلُبُ مِنْ صَاحِبِهِ أَنْ يُسَلِّمَ الأَوْرَاقَ لِمُعَلِّمِهِ.<br> يَتْرُكُهُ وَشَأْنَهُ.<br> يُذَكِّرُهُ بِمَا تَعَلَّمَهُ مِنْ تَعظيم القُرْآنِ الكَرِيمِ.</div>
<div class="P10_D6 cRed ipad"> أُلَوِّنُ: ِ</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>
答案 0 :(得分:2)
您的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");
答案 1 :(得分:0)
This code will work with your problem ..try it.
@Override
public void onScaleChanged(WebView view, float oldScale, float newScale) {
if (view != null) {
view.invalidate();
}
}