href=javascript:如何用

本文介绍了在Struts2框架下如何利用JavaScript实现弹窗查看流程图的功能。作者最初尝试直接在链接中传递参数,但发现无法正常工作。随后探讨了几种不同的方法,包括使用`<s:a>`标签、`href`属性结合JavaScript以及定义自定义函数来打开新窗口,并最终找到了一种既不会导致页面跳转又能正确传递参数的方法。

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

<script type="text/javascript">
function openwin(url){
 window.open(url,'_blank','resizable=1,width=900,height=400');
}
</script>

<s:a onclick="openwin('processDefinitionAction_checkImage?deploymentId=%{deploymentId}&imageResourceName=%{imageResourceName}');return false">查看流程图</s:a>

开始我用了什么的方式,但是从连接看不到参数,所以我想改成href=javascript:这样的形式

 <a href="javascript:alert('你好')" >hello href</a>这个可以用
    <s:a action="javascript:alert('你好')">hello action</s:a>错误

  • There is no Action mapped for namespace [/] and action name [javascript:alert('你好')] associated with context path [/xxxx].

 <a href="javascript:window.open('processDefinitionAction_checkImage?deploymentId=${deploymentId}&imageResourceName=${imageResourceName}','_blank','resizable=1,width=900,height=400')">查看</a>可以但是点击的网页也跳转了,输出[object],因为window.open返回的对象

 <a href="javascript:window.open('processDefinitionAction_checkImage?deploymentId=${deploymentId}&imageResourceName=${imageResourceName}','_blank','resizable=1,width=900,height=400');return false">查看</a>javascript错误,return语句在函数外

 

最后改成

function openwin(url){
 window.open(url,'_blank','resizable=1,width=900,height=400');
 
}
  </script>

<a href="javascript:openwin('processDefinitionAction_checkImage?deploymentId=${deploymentId}&imageResourceName=${imageResourceName}')">查看</a>

### JavaScript 协议在 HTML 超链接 `href` 属性中的作用 JavaScript 协议是一种伪协议,允许开发者通过 `<a>` 标签的 `href` 属性执行一段 JavaScript 代码。其基本语法如下: ```html <a href="javascript:expression">Link Text</a> ``` 在这种情况下,当用户点击该链接时,浏览器会解析并运行指定的 JavaScript 表达式或语句。 #### 主要功能与特点 1. **动态行为触发** 使用 `javascript:` 协议可以实现点击链接时不跳转到其他页面,而是直接执行某些操作。例如,可以通过这种方式弹出提示框[^2]: ```html <a href="javascript:alert('Hello, World!')">Click Me</a> ``` 2. **避免页面刷新** 如果希望某个按钮的行为仅限于前端逻辑处理而不涉及服务器交互,则此方式非常适用。例如,更改 DOM 元素的内容而无需重新加载整个网页: ```html <a href="javascript:document.getElementById('demo').innerHTML='New Content'"> Update Content </a> <div id="demo">Original Content</div> ``` 3. **参数传递简化版** 对于简单的 URL 参数设置场景,可以直接利用字符串拼接完成目标地址构建工作。这通常用于表单提交前的数据预处理阶段[^2]。 #### 常见使用场景分析 - **条件导航控制** 可以基于用户的输入或其他状态决定最终跳转的目标网址。例如,根据所选选项调整实际访问路径: ```html <select id="selectClub"> <option value="">请选择</option> <option value="clubA">俱乐部 A</option> <option value="clubB">俱乐部 B</option> </select> <a id="sendsign" href="javascript:void(0)">进入社团主页</a> <script> document.getElementById("selectClub").addEventListener("change", function () { const selectedValue = this.value; if (selectedValue === "") { document.getElementById("sendsign").setAttribute("href", "javascript:void(0)"); } else { document.getElementById("sendsign").setAttribute("href", "../unsolveActSign?club=" + encodeURIComponent(selectedValue)); } }); </script> ``` - **事件绑定替代方案** 在早期开发实践中,有时为了兼容性考虑或者减少额外脚本文件引入的需求,可能会采用此类方法来定义一些简单交互效果[^2]。 #### 注意事项 尽管上述用法提供了灵活性,但也存在潜在风险和局限性: - 容易破坏用户体验一致性,因为标准做法应该是将可点击区域限定为真正意义上的“链接”,而非混合业务逻辑。 - SEO 不友好——搜索引擎无法索引这些由 JavaScript 动态生成的内容。 - 维护成本较高;一旦项目规模扩大,散布各处的小型片段难以追踪管理。 因此,在现代 Web 开发中推荐优先选用更清晰分离结构的方式(如监听器模式),并通过显式的 API 或工具库调用来增强应用的功能表现力。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值