html5 父页面调用子页面js方法

最新推荐文章于 2024-01-17 10:27:48 发布

原创最新推荐文章于 2024-01-17 10:27:48 发布 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在HTML5中，从父页面调用子页面的JavaScript方法。通过指定子页面ID及预先定义好的方法，父页面能够与子页面进行交互，例如传递参数并触发子页面的数据加载，内容主要显示在子页面的某个指定区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父页面代码：

var randid=result.rows.item(0)['id'];
plus.webview.close("test_order_detail");//创建之前要关闭一次，因为这个方法是重复使用的，不会报错的
sub = plus.webview.create("test_order_detail.html","test_order_detail",subpage_style,{qid:randid});

sub.show();//这个方法是关键

创建子页面一定要添加随机数作为参数的。

mui('.mui-bar-tab').on('tap', 'a', function(e) {
<span style="white-space:pre">	</span>var targetTab = this.getAttribute('href');
<span style="white-space:pre">	</span>if(targetTab=="clearContent"){
<span style="white-space:pre">		</span>gettest(); //就是上边的方法
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>if(targetTab=="detail"){
<span style="white-space:pre">		</span>var detail=plus.webview.getWebviewById("test_order_detail");
<span style="white-space:pre">		</span>detail.evalJS("showdetail()");//这里也可以直接写js方法
<span style="white-space:pre">	</span>}
});

说明：

test_order_detail：子页面ID；

showdetail：方法在子页面定义。

子页面：

子页面通过父页面传的参数qid加载数据，主内容显示在dcontent中，父页面如果

function showdetail(){
	$("#dcontent").show();
	alert($("#dcontent").text());
}