单击链接时 javascript 功能不起作用

IT技术 javascript html iframe
2020-12-30 00:53:38

我有一个相当简单的页面，带有侧边栏导航和 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>
4个回答

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

除此之外，还有一些其他的事情需要纠正：

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

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

甚至 MDN 也同意

相反，在 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 模板中使用内联事件？对于使用内联 HTML 事件的小型纯 JS 项目是可以接受的（因为它们小而简单，并且易于控制），对于较大的项目，最好使用一些现代框架而不是纯 js。
2021-02-15 00:53:38
而且，正如我上面的帖子所述，这不仅仅是风格或偏好的问题。如果您使用内联事件处理程序，那么您在 JS 中的代码会产生真正的负面影响——这是远离它们的真正原因。当您使用它们时，您谈论的非常坏的习惯确实会在 JS 本身中体现出来。
2021-02-17 00:53:38
但是从纯 js 小项目开始并使用内联 html 事件的初学者可以很容易地学习如何正确使用框架模板。但是不使用内联事件的初学者养成了非常糟糕的习惯并且很难以正确的方式使用框架（他们专注于js部分而不是模板部分并且产生非常不清楚且难以维护的代码）并且需要大量时间（并且通常运气和老师）打破那个习惯
2021-02-23 00:53:38
@KamilKiełczewski 您的观点在许多论坛中被反复提及。它源于根本的误解和错误的对等。框架必须在本机代码中具有“钩子”，因此他们提出了内联方法来做到这一点，但呈现的代码不包含这些内联钩子。我不是在讨论框架，我是在讨论不会被转换成其他任何东西的本机代码。您关于小项目使内联事件正常的说法不是“事情”。内联事件处理程序很糟糕……在任何规模上。
2021-02-26 00:53:38
嗯，这是你的意见，你有权这样做。自从它被发明以来，在教过这些东西之后，大约有 20,000 多名学生之后，我的观点是，只要你了解框架是什么以及它如何完成它的工作，那么理解编写框架需要与在原生 JS 中编码不同的方法。我看到的坏习惯是糟糕的训练，它跳过了这个主题，直接潜入编码而不区分两者。了解每个人的最佳实践并不是火箭科学。
2021-03-06 00:53:38

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

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

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 而更喜欢使用 event.preventDefault()
2021-02-16 00:53:38
为了防止链接导航，你可以设置href到#。不需要 JavaScript。
2021-02-17 00:53:38
是的，同意（我在回答中详细讨论了这一点）。但是，您对我的评论的回复并不是关于我的评论首先是关于什么的。
2021-02-25 00:53:38
我知道，我指的是 onclick='getContent(event)'
2021-03-04 00:53:38
将值设置#为不内联 JavaScript。根本没有 JavaScript。
2021-03-09 00:53:38

您可以使用 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，它最终会传递给包装它的匿名全局包装器函数。有关为什么这很糟糕的更多详细信息，请参阅我的答案。
2021-02-12 00:53:38
其它你可能感兴趣的问题
上一篇测试是否存在嵌套的 JavaScript 对象键 下一篇“仅 HTTP 支持跨源请求。” 加载本地文件时出错