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

Question

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

我有一个相当简单的页面,其中包含侧边栏导航和用于加载内容的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sco*_*cus 16

您的问题是您忘记()在功能名称后添加.

除此之外,还有一些其他要纠正的事情:

不要使用内嵌HTML事件属性(onclick,onmouseover等等),因为它们:

创建难以阅读和调试的"意大利面条代码".
导致代码重复.
不能很好地扩展
不要按照关注点分离开发方法.
围绕属性值创建匿名全局包装函数,这些函数会改变this回调函数中的绑定.
不要遵循W3C活动标准.
IE中可能导致内存泄漏.

相反,在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);
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

@KamilKiełczewski 您的观点已在许多论坛中反复提出。它源于根本性的误解和错误的等同。框架必须在本机代码中具有“钩子”，因此他们想出了内联方法来做到这一点，但***渲染的***代码不包含这些内联钩子。我不是在讨论框架，而是在讨论不会转换为其他任何内容的本机代码。您关于小型项目使内联事件正常的说法并不是“事情”。内联事件处理程序在任何规模上都很糟糕。 (4认同)
好吧，这是你的意见，你有权这样做。自从它发明以来，在教授这些东西以及后来的大约 20,000 多名学生之后，我的观点是，只要您了解框架是什么以及它如何完成它的功能，那么理解编写框架需要花费大量时间就完全没有问题。与原生 JS 编码不同的方法。我看到的坏习惯是糟糕的培训，跳过这个主题并直接进入编码而不区分两者。了解每种方法的最佳实践并不是什么复杂的事情。 (4认同)
如果使用内联 HTML 事件属性如此糟糕 - 那么请告诉我：为什么所有现代框架（如 Angular、React、Vue 等）都被设计为在其 HTML 模板中使用内联事件？对于小型纯 JS 项目，使用内联 HTML 事件是可以接受的（因为它们小而简单，并且易于控制），对于较大的项目，最好使用一些现代框架而不是纯 js。 (2认同)

Answer 2

Rob*_* M. 1

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

function getContent {
   document.getElementById("contentFrame").src="LoremIpsum.html";
}

Run Code Online (Sandbox Code Playgroud)

应该：

function getContent() {
   document.getElementById("contentFrame").src="LoremIpsum.html";
}

Run Code Online (Sandbox Code Playgroud)

您还需要防止链接的默认事件

function getContent {
   document.getElementById("contentFrame").src="LoremIpsum.html";
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，4 月前
查看次数：	2443 次
最近记录：	6 年，4 月前