单击链接时 javascript 功能不起作用 [英] javascript function doesn't work when link is clicked
问题描述
我有一个相当简单的页面，其中包含一个侧边栏导航和一个用于加载内容的 iFrame.
我想通过单击侧边栏导航中的链接来更改 iFrame 的内容.我正在使用 javascript 来更改 document.element 的源代码 (.src).
我已经阅读了大量文章 (StackOverflow) 并且代码应该可以工作，但根本没有.
下面的代码是我创建的 html 页面，它在标签中包含了 JS.
<meta charset="UTF-8"><title>无标题文档</title><link href="css/default.css" rel="stylesheet" type="text/css"><script type="text/javascript">函数获取内容{document.getElementById("contentFrame").src="LoremIpsum.html";}<身体><div class="sidebar"><h1>技术文档</h1><ul><li>配置指南</li><li>API 指南</li><li><a href="" onclick='getContent()'>LoremIpsum</a></li><!-- <button onclick="getContent()">Lorem Ipsum</button>--><iframe class="content" id="contentFrame" src="dummy.html"></iframe>
你的问题是你忘记在函数名后添加().
除此之外，还有一些其他的事情需要纠正:
不要使用内联 HTML 事件属性(onclick、onmouseover 等)，因为它们:
- 创建意大利面代码"难以阅读和调试.
- 导致代码重复.
- 不能很好地扩展
- 不要遵循关注点分离开发方法.
- 围绕您的属性值创建匿名全局包装函数，这些函数会改变回调函数中的
this绑定. - 不要遵循 W3C 活动标准.
- 不要将 DOM 事件的引用传递给处理程序.
EvenMDN 同意
相反，在 JavaScript 中完成所有工作并使用 .addEventListener() 设置事件处理程序.
当按钮(或其他一些元素)可以使用时，不要使用超链接.如果您确实使用了超链接，则需要禁用其原生的导航愿望，这是通过将 href 属性设置为 # 而不是 "" 来实现的..
//将此代码放入<script>刚好位于结束正文标签 (</body>) 之前的元素.//获取按钮和 iframe 的引用var btn = document.getElementById("btnChangeSrc");var iFrame = document.getElementById("contentFrame");//为按钮设置点击事件处理程序btn.addEventListener("点击", getContent);函数 getContent() {console.log("旧源是:" + iFrame.src);iFrame.src="LoremIpsum.html";console.log("新来源是:" + iFrame.src);}<div class="sidebar"><h1>技术文档</h1><ul><li>配置指南</li><li>API 指南</li><button id="btnChangeSrc">更改源</button><iframe class="content" id="contentFrame" src="dummy.html"></iframe>
I have a fairly simple page with a sidebar nav and an iFrame in which to load content.
I want to change the content of the of the iFrame by clicking on links in the sidebar nav. I'm using the javascript to change the source (.src) of the document.element.
I've read numerous articles (StackOverflow) and the code should work, but is simply doesn't.
The code below is the html page I've created and it includes the JS in a tag.
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function getContent{
document.getElementById("contentFrame").src="LoremIpsum.html";
}
</script>
</head>
<body>
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
<li>Configuration Guides</li>
<li>API Guides</li>
<li><a href="" onclick='getContent()'> LoremIpsum</a></li>
</ul>
<!-- <button onclick="getContent()">Lorem Ipsum</button> -->
</div>
<iframe class="content" id="contentFrame" src="dummy.html">
</iframe>
</body>
Your problem was that you forgot to add () after your function name.
Beyond that, there are a few other things to correct:
Don't use inline HTML event attributes (onclick, onmouseover, etc.) as they:
- Create "spaghetti code" that is difficult to read and debug.
- Lead to duplication of code.
- Don't scale well
- Don't follow the separation of concerns development methodology.
- Create anonymous global wrapper functions around your attribute values that alter the
thisbinding in your callback functions. - Don't follow the W3C Event Standard.
- Don't cause a reference to the DOM event to be passed to the handler.
Even MDN agrees
Instead, do all your work in JavaScript and use .addEventListener() to set up event handlers.
Don't use a hyperlink when a button (or some other element) will do. If you do use a hyperlink, you need to disable its native desire to navigate, which is done by setting the href attribute to #, not "".
// Place this code into a <script> element that goes just before the closing body tag (</body>).
// Get a reference to the button and the iframe
var btn = document.getElementById("btnChangeSrc");
var iFrame = document.getElementById("contentFrame");
// Set up a click event handler for the button
btn.addEventListener("click", getContent);
function getContent() {
console.log("Old source was: " + iFrame.src);
iFrame.src="LoremIpsum.html";
console.log("New source is: " + iFrame.src);
}
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
<li>Configuration Guides</li>
<li>API Guides</li>
</ul>
<button id="btnChangeSrc">Change Source</button>
</div>
<iframe class="content" id="contentFrame" src="dummy.html"></iframe>
这篇关于单击链接时 javascript 功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
