单击链接时javascript函数不起作用答案

【问题标题】：javascript function doesn't work when link is clicked单击链接时javascript函数不起作用
【发布时间】：2017-09-13 13:37:27
【问题描述】：

我有一个相当简单的页面，其中包含一个侧边栏导航和一个 iFrame，用于加载内容。

我想通过单击侧边栏导航中的链接来更改 iFrame 的内容。我正在使用 javascript 来更改 document.element 的源 (.src)。

我已阅读大量文章 (StackOverflow)，代码应该可以工作，但根本不行。

下面的代码是我创建的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>

【问题讨论】：

尝试在js函数声明中加括号。而不是 'function getContent{' 使用 'function getContent() {'。
查看控制台，你会看到有语法错误

标签： javascript html iframe

【解决方案1】：

您的问题是您忘记在函数名称后添加()。

除此之外，还有一些需要更正的地方：

不要使用内联 HTML 事件属性（onclick、onmouseover 等），因为它们：

创建难以阅读和调试的“意大利面条式代码”。
导致代码重复。
不能很好地扩展
不要遵循 separation of concerns 开发方法。
围绕您的属性值创建匿名全局包装函数，以更改回调函数中的 this 绑定。
不要关注W3C Event Standard。
不要将 DOM 事件的引用传递给处理程序。

Even MDN agrees

相反，使用 JavaScript 完成所有工作并使用 .addEventListener() 设置事件处理程序。

当按钮（或其他元素）可以使用时，不要使用超链接。如果您确实使用超链接，则需要禁用其本机的导航愿望，这通过将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>

【讨论】：

如果使用内联 HTML 事件属性非常糟糕 - 那么请告诉我：为什么所有现代框架（如 angular、react、vue 等）都设计为在其 HTML 模板中使用内联事件？对于小型纯 JS 项目，使用内联 HTML 事件是可以接受的（因为它们小而简单，易于控制），对于较大的项目，最好使用一些现代框架而不是纯 js。
@KamilKiełczewski 您的观点已在许多论坛中被反复提及。它源于基本的误解和错误的对等。一个框架必须在原生代码中有“钩子”，所以他们想出了内联的方法来做到这一点，但是 rendered 代码不包含这些内联钩子。我不是在讨论框架，而是在讨论不会转化为其他任何东西的本机代码。您关于小项目使内联事件正常的说法不是“事情”。内联事件处理程序很糟糕......在任何规模上。
但是从纯js小项目入手并使用内联html事件的初学者可以很容易地学习如何正确使用框架模板。但是不使用内联事件的初学者会养成非常糟糕的习惯，他们很难以正确的方式使用框架（他们专注于 js 部分而不是模板部分，并且产生非常不清楚且难以维护的代码）并且需要大量时间（并且通常是运气和老师）打破这种习惯
嗯，这是你的意见，你有权这样做。在教授这些东西自发明以来以及后来大约 20,000 多名学生之后，我的观点是，只要您了解框架是什么以及它如何完成它的工作，那么理解编写框架需要花费与在本机 JS 中编码不同的方法。我看到的坏习惯是糟糕的培训，跳过了这个话题，直接进入编码而不区分两者。了解每个人的最佳实践并不是火箭科学。
而且，正如我上面的帖子所述，这不仅仅是风格或偏好的问题。如果您使用内联事件处理程序，则对您在 JS 中的代码有真正的负面影响——这是远离它们的真正原因。你所说的非常不好的习惯，在你使用的时候确实会在 JS 本身中体现出来。

【解决方案2】：

这是一个语法错误。无论函数的参数如何，都需要括号。但是，最好将 script 标签放在 body 标签的底部。

【讨论】：

【解决方案3】：

您的函数声明中有语法错误（缺少括号）：

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>

【讨论】：

为了防止链接导航，您可以将href 设置为#。无需 JavaScript。
公平地说，我倾向于避开像这样的内联javascript，更喜欢使用event.preventDefault()
将值设置为 # 不是内联 JavaScript。根本没有 JavaScript。
我知道，我指的是onclick='getContent(event)'
是的，同意（我在回答中详细讨论了这一点）。但是，您对我的评论的回复与我最初的评论无关。

【解决方案4】：

您可以使用 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>

【讨论】：

哦不，请不要鼓吹javascript:void(0)（不是1997）！此外，如果您打算这样做，将return false 添加到函数中是不够的。您还需要onclick 属性看起来像这样：onclick="return getContent()" 和event 参数不会传递给getContent，它最终会被传递给包装它的匿名全局包装函数。请参阅我的答案以了解有关为什么这不好的更多详细信息。