如何在锚定href中利用javascript而不浏览页面
[英]how to utilize javascript in the anchor href and not navigate away from the page
问题描述
I need to load some dependency java-scripts onto a page if they don't already exist, through java-script. 
我需要通过Java脚本将一些依赖Java脚本加载到页面上（如果尚不存在）。 This is done by checking to see if variables are defined, if they are not then generate a script element and add it to the head of the page. 通过检查是否已定义变量来完成此操作，如果未定义，则生成脚本元素并将其添加到页面的开头。
It works the way I'd expect in Chrome. 它以我在Chrome中期望的方式工作。 It seems to open a new window when I call the code directly in the href in IE/Firefox. 当我直接在IE / Firefox中的href中调用代码时，似乎打开了一个新窗口。 Oddly it works the way I'd expect when I call it indirectly in the href. 奇怪的是，它以我在href中间接调用它时所期望的方式工作。 Here's a trimmed example showing the behaviors (with loading jquery) 这是显示行为的修剪示例（带有加载的jquery）
<!DOCTYPE html>
<html>
<head>
<script>
function test(){
if (typeof jQuery == 'undefined') {
var js = document.createElement('script');
js.setAttribute('type','text/javascript');
js.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
var head= document.getElementsByTagName('head')[0];
head.appendChild(js);
}
}
</script>
</head>
<body>
<a href="javascript: if (typeof jQuery == 'undefined') {var js = document.createElement('script');js.setAttribute('type','text/javascript');js.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');var head= document.getElementsByTagName('head')[0];head.appendChild(js);}"> navigates to new page </a>
|
<a href="javascript: test();">executes on page</a>
</body>
</html>
If you view this page you'll notice the second link actually loads jquery and puts it on the dom. 如果您查看此页面，您会注意到第二个链接实际上是加载jquery并将其放在dom上的。 It also works in chrome. 它也适用于Chrome。 On IE/FF you'll navigate to a new page with <body>[object HTMLScriptElement]</body> as the body contents. 在IE / FF上，您将导航到以<body>[object HTMLScriptElement]</body>作为正文内容的新页面。
I am perplexed as to why it behaves differently for the second link, and am looking for a solution. 我对为什么第二个链接的行为有所不同感到困惑，并且正在寻找解决方案。
FYI: The reason this needs to be executed in a url is because I'm actually calling this within an AS2 SWF using getURL(), and I cannot alter the pages html to include the java-scripts necessary. 仅供参考：之所以需要在url中执行，是因为我实际上是在AS2 SWF中使用getURL（）调用此函数，并且无法更改HTML页面以包含必要的Java脚本。
2 个解决方案
解决方案1
1 已采纳 2013-06-24 22:31:34
Just add 只需添加
return false;
at the end of your code in the href attribute, it will cancel anchor default behaviour, which to navigate to an other URL 在href属性的代码末尾，它将取消锚定默认行为，该默认行为将导航到其他URL
解决方案2
0 2013-06-25 14:03:36
For some reason wrapping this whole thing in an immediate java-script invocation seemed to solve the problem. 由于某种原因，将整个内容包装在立即的Java脚本调用中似乎可以解决该问题。
<a href="javascript: (function(){if (typeof jQuery == 'undefined') {var js = document.createElement('script');js.setAttribute('type','text/javascript');js.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');var head= document.getElementsByTagName('head')[0];head.appendChild(js);}}());"> Works</a>
oddly enough so did adding alerts to the end, which led me to this idea, though I don't understand why it works: 奇怪的是，在末尾添加了警报，这使我想到了这个主意，尽管我不明白它为什么起作用：
<a href="javascript: if (typeof jQuery == 'undefined') {var js = document.createElement('script');js.setAttribute('type','text/javascript');js.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');var head= document.getElementsByTagName('head')[0];head.appendChild(js); alert(js);alert(head);}"> Works but alerts</a>
EDIT: it works because of the return type of the function, which is explained here: http://en.wikipedia.org/wiki/Bookmarklet#Concept 编辑：由于该函数的返回类型而起作用，这在此处进行了说明： http : //en.wikipedia.org/wiki/Bookmarklet#Concept
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.