我想使用 JavaScript 从 android 和 iphone 显示 webkit 应用程序的 HTML 源代码。
首先是安卓。在android应用程序中,我希望从网页运行html视图源javascript代码,并调用一个java函数,然后该函数将在网页上运行javascript。 Android代码中使用了SwipeRefreshLayout组件。
public class MainActivity extends AppCompatActivity {
static WebView webview1;
SwipeRefreshLayout swipeRefreshLayout;
onCreate() {
webview1.addJavascriptInterface(this, "android"); // creates a js interface
...
}
@JavascriptInterface
public void view_source_code(String msg) {
//Toast.makeText(main_activity, "html_view_source", Toast.LENGTH_SHORT).show();
swipeRefreshLayout.post(new Runnable() {
@Override
public void run() {
MainActivity.webview1.loadUrl("javascript:(function(){" +
"function get_doctype() { var doctype = '<!DOCTYPE ' + document.doctype.name + (document.doctype.publicId?' PUBLIC \"' + document.doctype.publicId + '\"':'') + (document.doctype.systemId?' \"' + document.doctype.systemId + '\"':'') + '>'; return doctype; } \n" +
"var a1 = get_doctype() + document.documentElement.outerHTML; " +
" a1 = a1.replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll(\"\\n\", \"<br>\"); \n" +
"var href = window.location.href;" +
"page_load = function() {" +
" window.location.href = href;" +
"};" +
"view_html = function() {" +
" return '<center><br><button onclick=\"page_load();\">Go to Ultrazon.com</button></center><br>" +
" <pre style=\"font-weight:bold;font-size:85%;padding-left:5px;\">'+ a1 + '</pre>'" +
"};" +
"" +
"document.body.style.backgroundColor = \"yellow\";" +
"document.body.style.fontSize = \"20px\"; " +
"document.body.innerHTML = view_html(); " +
"})();"
);
}
});
}
iphone,swift代码是这样的
class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if (message.name == "iphoneViewSourceCode") {
let javascript = "javascript:(function(){" +
"function get_doctype() { var doctype = '<!DOCTYPE ' + document.doctype.name + (document.doctype.publicId?' PUBLIC \"' + document.doctype.publicId + '\"':'') + (document.doctype.systemId?' \"' + document.doctype.systemId + '\"':'') + '>'; return doctype; } \n" +
"var a1 = get_doctype() + document.documentElement.outerHTML; " +
" a1 = a1.replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll(\"\\n\", \"<br>\"); \n" +
"var href = window.location.href;" +
"page_load = function() {" +
" window.location.href = href;" +
"};" +
"view_html = function() {" +
" return '<center><br><button onclick=\"page_load();\">Go To Page</button></center><br>" +
" <pre style=\"font-weight:bold;font-size:85%;padding-left:5px;\">'+ a1 + '</pre>'" +
"};" +
"document.body.style.backgroundColor = \"yellow\";" +
"document.body.style.fontSize = \"20px\"; " +
"document.body.innerHTML = view_html(); " +
"})();"
self.webView.evaluateJavaScript(javascript) { (response, error) in
debugPrint("javascript webkit")
}
}
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
let contentController = WKUserContentController()
contentController.add(self, name:"iphoneViewSourceCode")
let configuration = WKWebViewConfiguration()
configuration.userContentController = contentController
configuration.ignoresViewportScaleLimits = false
configuration.suppressesIncrementalRendering = true
configuration.allowsInlineMediaPlayback = true
configuration.allowsAirPlayForMediaPlayback = false
configuration.allowsPictureInPictureMediaPlayback = true
//configuration.requiresUserActionForMediaPlayback = false
configuration.mediaTypesRequiringUserActionForPlayback = []
configuration.defaultWebpagePreferences.allowsContentJavaScript = true
webView = WKWebView(frame: CGRectMake(0, 0, UIScreen.main.bounds.size.width, UIScreen.main.bounds.size.height), configuration: configuration)
...
}
}
最后是 html 中的 javascript 来调用 java 和 swift 方法。
<script>
if ( is_android() ) {
android.view_source_code("html_source_code");
}
</script>
和
<script>
if ( is_iphone() ) {
window.webkit.messageHandlers.iphoneViewSourceCode.postMessage('');
}
</script>