我想通过单击侧边栏导航中的链接来更改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>
#1 楼
您的问题是您忘记在函数名称后添加()。此外，还有其他一些要纠正的问题：
不要使用内联HTML事件属性（
onclick，onmouseover等）因为它们是：创建难以阅读和调试的“意大利面条代码”。
导致代码重复。
伸缩性不佳
不要请遵循关注点分离开发方法。
在属性值周围创建匿名全局包装函数，以更改回调函数中的
this绑定。请勿遵循W3C事件标准。
可能会导致IE中发生内存泄漏。
即使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模板中使用内联事件？对于小型纯JS项目，使用内联HTML事件是可以接受的（因为它们很小且简单，并且易于控制），对于大型项目，最好使用一些现代框架代替纯js。
–卡米尔（KamilKiełczewski）
19/09/26'5:33
@KamilKiełczewski在许多论坛中，您的观点一遍又一遍地提到。它源于基本的误解和错误的对等。框架必须将“挂钩”插入本机代码，因此它们想出了内联的方式，但是呈现的代码不包含这些内联的钩子。我不是在讨论框架，而是在讨论不会转换为其他代码的本机代码。您关于小型项目使内联事件正常的声明不是“事”。内联事件处理程序很糟糕……无论如何。
–斯科特·马库斯（Scott Marcus）
19/09/26'5:37
但是，从纯js小项目开始并使用内联html事件的初学者可以很容易地学习如何正确使用框架模板。但是不使用内联事件的初学者会产生非常糟糕的习惯，使他们难以以正确的方式使用框架（他们专注于js部分而不是模板部分，并且产生非常不清楚的nad难以维护代码），并且需要很多时间（并且通常是运气和老师）来打破习惯
–卡米尔（KamilKiełczewski）
19-09-26在5:42
是的-在框架世界中，不使用内联事件是不好的习惯（来自纯js体验）-我在初学者的“框架”代码中看到了这种习惯-并且对于他们来说很难打破这种习惯。
–卡米尔（KamilKiełczewski）
19-09-26在5:50
好吧，这是您的意见，您有权获得它。自从发明了这种东西并教了大约20,000多名学生之后，我的观点是，只要您了解框架是什么以及它如何完成其工作，就完全可以理解编码框架需要一个框架。与使用本机JS编码不同的方法。我看到的一个坏习惯是训练有素，跳过了这个主题，直接进入编码而又没有区别。了解每个人的最佳实践不是火箭科学。
–斯科特·马库斯（Scott Marcus）
19/09/26'5:57
#2 楼
这是语法错误。无论函数的参数如何，都需要括号。但是，最好将脚本标签放在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。
–斯科特·马库斯（Scott Marcus）
17年4月17日在21:38
公平地说，我倾向于避免像这样内联javascript，而是倾向于使用event.preventDefault（）
–罗布·M。
17年4月17日在21:40
将值设置为＃不会内联JavaScript。根本没有JavaScript。
–斯科特·马库斯（Scott Marcus）
17年4月17日在21:41
我知道，我指的是onclick ='getContent（event）'
–罗布·M。
17年4月17日在21:41
是的，同意（我将在答复中详细讨论）。但是，您对我的评论的回复最初与我的评论无关。
–斯科特·马库斯（Scott Marcus）
17年4月17日在21:42
#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（）”，并且事件参数不会传递给getContent，最终会传递给包装它的匿名全局包装函数。请参阅我的答案以了解有关此问题的更多详细信息。
–斯科特·马库斯（Scott Marcus）
17年4月17日在21:50
评论
尝试在js函数声明中添加括号。而不是'function getContent {'，请使用'function getContent（）{'。查看控制台，您将看到语法错误