`
Everyday都不同
  • 浏览: 723673 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

点击按钮(或超链接)如何跳转到另外一个页面并执行目标页面的js函数

    博客分类:
  • jsp
阅读更多

标题的前半部分其实不必赘述,按钮也可以换成超链接。。

 

假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面的某个js函数可以执行~~

 

关键在于如何跳转到目标页面之后并「接着」执行「目标页面的js函数」。原因是目标页面的某个js函数原来是需要点击该页面的按钮或超链接才能触发的,但现在需要在跳转到B页面后立即执行!

 

先不想是从A页面跳转到B页面,假设你想在B页面一打开就执行的话,是需要把代码逻辑写在$(function(){});里面的。这就是一个突破的思路。

 

我们在A页面定义一个按钮用于触发如题所示的操作:

 

<button type="button" class="btn btn-info" onclick="openReport()">打开报表</button>

 它对应的js函数为:

 

function openReport() {
     window.open("B页面的url?flag=true&A="+a,'newwindow','height=1100,width=1400');
 }

 同时传递了2个参数给目标页面B页面:flag和A。

 

在B页面的js文件的$(fucntion(){});里面加上这一段代码(关键),如

 

var url = window.location.href;//获取当前浏览器的url
	index = url.indexOf("flag");//判断当前url是否有flag,如果有,说明是从A页面跳转而来的,就执行下面的程序
	
	if(index !=-1) {//由A页面跳转而来
		//参数准备
		var start = url.indexOf("A");
		var a = url.substring(start + "A".length+1);
		var date = new Date();
		var year = date.getFullYear();//当前年
		var month = date.getMonth() + 1;//当前月(月是从0开始,所以必须加上1)
		month = month<10 ? ("0"+month):month;
		var queryDate = year + month;
	
		// + "&suffix=" + encodeURI(encodeURI(suffix));
		var url= "ajax的url?A=" + a +"&queryDate=" + queryDate;
            //带参数执行逻辑
	    $.ajax({ 
		 url: url, dataType:"html",headers:{"X-Fragment":"_"},
		 cache:false,
		 success: function(html) { 
			//响应成功后的逻辑处理
		 }
	    }); 
	}

 这段代码是很典型的,对于A页面传递过来的参数的接收在代码的注释中都说明得十分详细。

顺便,还温习了js获取系统年和月的用法。

这里对于flag变量的妙用是一种巧思~~~

 

 

1
2
分享到:
评论

相关推荐

    点击一个超链接弹出一个对话框

    在网页设计中,点击一个超链接弹出对话框是一种常见的交互方式,这通常涉及到JavaScript(JS)技术的应用。JavaScript是一种轻量级的解释型编程语言,广泛用于网页和网络应用,提供动态、交互性的用户体验。在本场景...

    js 外观类似按钮的超链接

    在网页设计中,为了提供更好的用户体验,我们...下载提供的“外观像按钮的超链接”文件,你将找到一个实际的示例代码,可以直接应用到你的项目中。这个方法可以帮助你提高用户体验,同时保持代码的简洁性和可维护性。

    HTML 按钮超链接

    HTML中的按钮元素 `&lt;button&gt;` 用于创建可点击的按钮,用户可以通过点击这个按钮触发相应的JavaScript函数或提交表单数据。例如: ```html ('Button clicked!')"&gt;点击我 ``` 在这个例子中,`type="button"` 表示这是...

    点击超链接弹出一个信息框

    标题“点击超链接弹出一个信息框”涉及的是网页交互中的常见功能,即通过超链接触发JavaScript事件,显示一个信息提示框。在这个场景下,我们通常会使用HTML结合JavaScript来实现这一功能。以下是对这个主题的详细...

    使用a链接时如何阻止超链接跳转

    在网页开发中,`&lt;a&gt;`标签用于创建超链接,它可以指向另一个页面或者执行JavaScript代码。然而,在某些情况下,我们可能需要阻止默认的链接跳转行为,比如在用户进行特定操作后才允许跳转,或者在点击链接时执行一些...

    解决layer弹出层的内容页点击按钮跳转到新的页面问题

    回调函数是被作为参数传递到另一个函数中,并在另一个函数执行完毕后被调用的函数。在AJAX调用中,`success`和`error`参数即为回调函数,它们分别在请求成功和请求失败时被调用。 ### 知识点6:CSS尺寸单位 在设置...

    js页面跳转代码汇总

    这是一个简单的HTML超链接,点击它时会执行JavaScript函数`history.go(-1)`。该函数会使浏览器返回至上一个页面。这种方式与使用`window.history.back()`类似,但更加简洁。 另外还有一种方式是直接使用服务器变量...

    javascript超链接

    如果存在,则通过设置一个过去的时间作为过期时间,从而使得该Cookie失效并被浏览器删除。 ### 总结 通过以上介绍,我们可以看到JavaScript提供了非常强大的能力来操作Cookie。这些基本的操作对于实现用户状态保持...

    js超链接伸缩特效js超链接伸缩特效

    "js超链接伸缩特效"就是一种利用JavaScript实现的交互效果,主要用于增强网站的用户体验,特别是对于导航菜单或按钮等元素,使得用户点击时能有明显的视觉反馈。这种特效通过改变超链接的尺寸、颜色、透明度或其他...

    javascript 函数教程(由浅入深)

    - 实例1展示了如何创建一个无参函数并在按钮点击事件中调用,避免了脚本在页面加载时立即执行。 - 实例2是一个有参函数,计算两个数的乘积并返回结果。 - 实例3演示了如何通过对象事件调用函数,不同的按钮触发...

    点击按钮弹出窗口

    a标签是超链接的基础,它用于创建从一个文档到另一个文档的链接。默认情况下,点击a标签会跳转到新的页面。然而,在这个场景下,我们并不希望完全跳转,而是要在当前页面上弹出一个小窗口。这需要利用JavaScript或者...

    超链接打开网页嵌套层

    例如,我们可以编写一个函数来监听超链接的点击事件,当点击发生时,该函数会阻止默认的页面跳转行为,然后在指定的嵌套层(如div元素)中加载目标URL的内容。 ```javascript // jQuery 示例 $('a.nested-link')....

    php结合js实现点击超链接执行删除确认操作_.docx

    查询结果以表格的形式展示出来,其中每个记录的删除按钮都绑定了一个JavaScript函数`del()`。 ##### 步骤2:JavaScript确认框实现 ```javascript function del(id) { if (confirm('确认删除')) { window....

    一个用js编写的3D按钮

    此外,它还可以处理按钮的逻辑,如执行特定的函数或跳转到新的页面。 ### 总结 综上所述,“一个用js编写的3D按钮”不仅展示了HTML、CSS和JavaScript在前端开发中的协同工作,还强调了通过简单的技术组合实现复杂...

    easyui Datagrid 数据列表比较上一个上传的增加了超链接并传值、条件清空、日期控件清空和数据修改功能

    Datagrid中的每一行数据可以配置为超链接,用户点击后跳转到其他页面或执行特定操作。通过设置`href`属性或者使用`formatter`函数,可以自定义链接内容和传递参数。例如,将记录ID作为参数传递到处理函数,以便根据...

    php结合js实现点击超链接执行删除确认操作

    在超链接的href属性中调用了一个JavaScript函数del,并传递了当前记录的ID作为参数。当用户点击“删除”按钮时,这个JavaScript函数会被执行。如果用户点击“确定”按钮,页面就会跳转到当前页面的index.php文件,并...

    BootStrap 超链接变按钮的实现方法

    文章中提到了一个JavaScript函数`openWin`,这个函数可以用来在用户点击按钮时执行一些操作,比如打开一个新窗口或者在新窗口中加载数据。这个函数通过获取到特定的超链接元素,并对其href属性进行设置,然后通过...

    php结合js实现点击超链接执行删除确认操作__1.docx

    上述代码中,`confirm()`函数会弹出一个包含“确认”和“取消”两个按钮的对话框,如果用户点击“确认”,则通过`window.location.href`跳转到指定的URL执行删除操作。 ##### 3. 删除数据库记录 最后,在服务器端...

    JQuery实现动态表格点击按钮表格增加一行

    这里使用了`onclick`属性,当用户点击按钮时触发一个JavaScript函数(`del`函数)。在现代的Web开发中,通常推荐使用更为现代的事件绑定方式,例如使用JQuery的`.on()`方法。 4. 变量和作用域:在JavaScript中,...

    新浪博客跳转代码

    在这个例子中,`&lt;div&gt;`元素的`onclick`属性绑定了JavaScript函数`redirect`,当用户点击这个元素时,会触发`redirect`函数,从而实现页面跳转。 四、注意事项 1. 在新浪博客中使用JavaScript跳转时,要确保你的...

Global site tag (gtag.js) - Google Analytics