点击链接时javascriptfunction不起作用
我有一个相当简单的页面，侧边栏导航和加载内容的iFrame。
我想通过点击边栏导航中的链接来更改iFrame的内容。 我正在使用JavaScript来更改document.element的源（.src）。
我已经阅读了大量的文章（StackOverflow）和代码应该工作，但根本没有。
下面的代码是我创build的html页面，它包含标签中的JS。
<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> 你的问题是你忘了添加()在你的函数名后。
除此之外，还有其他一些事情要纠正：
不要使用内联HTML事件属性（ onclick ， onmouseover等），因为它们是：
- 创build难以阅读和debugging的“意大利面代码”。
- 导致代码重复。
- 不要很好地扩展
- 不要按照关注发展方法的分离 。
- 围绕您的属性值创build匿名全局包装函数，以改变callback函数中的
this绑定。 - 不要遵循W3C事件标准 。
- IE中可能导致内存泄漏 。
相反，在JavaScript中执行所有工作，并使用.addEventListener()来设置事件处理程序。
当button（或其他元素）将不会使用超链接。 如果你使用超链接，你需要禁用它的本地愿望，这是通过将href属性设置为#而不是"" 。
// 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>
你的函数声明中有一个语法错误（缺less括号）：
function getContent { document.getElementById("contentFrame").src="LoremIpsum.html"; }
应该：
function getContent() { document.getElementById("contentFrame").src="LoremIpsum.html"; }
您还需要阻止链接的默认事件
<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(event) { event.preventDefault(); 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(event)'> LoremIpsum</a></li> </ul> <!-- <button onclick="getContent()">Lorem Ipsum</button> --> </div> <iframe class="content" id="contentFrame" src="dummy.html"> </iframe> </body>
这是一个语法错误。 无论函数的参数如何，括号都是必需的。 但是，将脚本标签放在主体标签的底部是一种很好的做法。
你可以使用javascript：void（0）。
<a href="javascript:void(0)" onclick='getContent(event)'> LoremIpsum</a>
或者在javascript上返回false
<script type="text/javascript"> function getContent(){ document.getElementById("contentFrame").src="LoremIpsum.html"; return false; } </script>
