我正在尝试使用通过函数访问XHTML
的元素对页面进行一些修改。执行此操作的函数是这样调用的:
1. 按下一个按钮,调用访问元素的函数,存储,并且为了它,将它分配给另一个变量并像这样替换它: outerHTML
Javascript
Javascript
Android WebView
Javascript
outerHTML
document.getElementById("bodyTag").outerHTML = newHTML
当第一次按下按钮时,所有这些都可以正常工作。第二次按下它会导致以下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;
}
}