我正在尝试使用XHTML
元素对outerHTML
页面进行一些修改,通过Javascript
函数访问。执行此操作的Javascript
函数从Android WebView
调用,如下所示:
1.按下一个按钮,调用Javascript
函数访问outerHTML
元素,存储,并且只是为了它,将其分配给另一个变量并替换它:document.getElementById("bodyTag").outerHTML = newHTML
< / p>
第一次按下按钮时,所有这一切都正常。第二次按下会导致以下LogCat
错误:
09-14 13:24:21.432: V/com.sriram.outerhtml.OuterHTML$2@4052e0f8(10931): Clicked click!
09-14 13:24:21.432: V/com.sriram.outerhtml.OuterHTML@40520da8(10931): Replacing outerHTML
09-14 13:24:21.452: D/com.sriram.outerhtml.OuterHTML$1@4052dcf8(10931): jswebview: Function to replace outerHTML.. with itself of level = LOG at line: 410
09-14 13:24:21.452: D/com.sriram.outerhtml.OuterHTML$1@4052dcf8(10931): jswebview: Uncaught TypeError: Cannot read property 'outerHTML' of null of level = ERROR at line: 411
我的问题:
1.错误表示文档中没有带有该标记的元素。但事实并非如此,因为它第一次有效。错误在哪里?
2.我如何做到这一点?
代码:
OuterHTML.java
:
/*
* Each time the button is clicked, a javascript function is invoked.
* Javascript function: Takes outerHTML, assigns it to new variable and replaces it.
*/
package com.sriram.outerhtml;
import java.io.File;
import android.app.Activity;
import android.os.Bundle;
import android.os.Environment;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.webkit.ConsoleMessage;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
public class OuterHTML extends Activity {
private WebView wv;
private Button click;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_outer_html);
wv = (WebView) findViewById(R.id.webview);
wv.getSettings().setJavaScriptEnabled(true);
String path = Environment.getExternalStorageDirectory().getAbsolutePath() + "/JsWebView/";
String path_file = "file:///" + path + "mypage_copy.xhtml";
wv.loadUrl(path_file);
wv.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onConsoleMessage(ConsoleMessage cm) {
/*
* 1.Override console message to display messages from the javascript function.
*/
if(cm.messageLevel().equals("ERROR")) {
Log.d(this.toString(), "jswebview: " + cm.message() + " of level = " + cm.messageLevel() + " at line: " + cm.lineNumber());
} else {
Log.d(this.toString(), "jswebview: " + cm.message() + " of level = " + cm.messageLevel() + " at line: " + cm.lineNumber());
}
return true;
}
});
click = (Button) findViewById(R.id.click);
click.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.v(this.toString(), "Clicked click!");
replaceOuterHTML();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.outer_html, menu);
return true;
}
public void replaceOuterHTML() {
Log.v(this.toString(), "Replacing outerHTML");
wv.loadUrl("javascript:replaceOuterHTML()");
}
}
布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".OuterHTML" >
<Button
android:id="@+id/click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:text="Click" />
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/click"
android:text="@string/hello_world" />
</RelativeLayout>
XHTML
页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="application/xml+xhtml;charset=UTF-8" />
<script src="highlightWordInSentence.js" type="text/javascript"></script>
<script src="jquery-2.0.2.min.js"> </script>
<title>Building your resume</title>
</head>
<body xmlns="http://www.w3.org/1999/xhtml" id="highlightbegin">
<h1>Building your resume</h1>
</body>
</html>
Javascript
函数:
function replaceOuterHTML() {
console.info("Function to replace outerHTML.. with itself");
var oldHTML = document.getElementById("highlightbegin").outerHTML;
if(!oldHTML) {
console.error("oldHTML is null.");
} else {
console.info("replacing oldHTML");
var newHTML = oldHTML;
document.getElementById("highlightbegin").outerHTML = newHTML;
}
}