点击链接时javascript功能不起作用 [英] javascript function doesn't work when link is clicked
问题描述
我想通过单击来更改iFrame的内容。
我想通过单击来更改iFrame的内容在边栏导航中的链接。我使用javascript来更改document.element的源代码（.src）。我读过很多文章（StackOverflow），代码应该可以工作，但是根本就没有。
下面的代码是我创建的html页面，它包含标签中的JS。
< head>
< meta charset =UTF-8>
< title>无标题文档< / title>
< link href =css / default.css =stylesheettype =text / css>
< script type =text / javascript>
函数getContent {
document.getElementById（contentFrame）。src =LoremIpsum.html;
}
< / script>
< / head>
< body>
< div class =sidebar>< h1>技术文档< / h1>
< ul>
< li>配置指南< / li>
< li> API指南< / li>
< li>< a href =onclick ='getContent（）'> LoremIpsum< / A>< /锂>
< / ul>
<！ - < button onclick =getContent（）> Lorem Ipsum< / button> - >
< / div>
< iframe class =contentid =contentFramesrc =dummy.html>
< / iframe>
< / body>
你的问题是你忘了添加<$ c
除此之外，还有其他一些东西需要更正：
不要使用内联HTML事件属性（ onclick ， onmouseover 等等）：
- 创建难以阅读和调试的意大利面条代码。
- 导致重复的代码。 href =https://en.wikipedia.org/wiki/Separation_of_concerns =nofollow noreferrer>关注点分离 开发方法。
- 创建匿名全局包装函数围绕您的属性值发挥作用，这些属性值会改变回调函数中的
this绑定。 W3C事件标准 。 - 可能导致
相反，使用JavaScript进行所有工作并使用 .addEventListener（） 来设置事件处理程序。
不要在按钮（或其他元素）时使用超链接。如果您确实使用超链接，则需要禁用其原始导航需求，这通过将 href 属性设置为＃。
//将此代码放入< script> （< / body>）获取对按钮和iframevar的引用btn = document.getElementById（btnChangeSrc）; var iFrame = document.getElementById（contentFrame） ; //为buttonbtn.addEventListener（click，getContent）;函数getContent（）{console.log（Old source was：+ iFrame.src）设置单击事件处理程序; iFrame.src = LoremIpsum.html; console.log（New source is：+ iFrame.src）;}
< div class =sidebar>< h1>技术文档< / h1>< ul> < li>配置指南< / li> < li> API指南< / li>< / ul>< button id =btnChangeSrc>更改来源< /按钮>< / div>< iframe class =contentid =contentFramesrc =dummy.html>< / iframe>
I have a fairly simple page with a sidebar nav and an iFrame in which to load content.
I want to change the content of the of the iFrame by clicking on links in the sidebar nav. I'm using the javascript to change the source (.src) of the document.element.
I've read numerous articles (StackOverflow) and the code should work, but is simply doesn't.
The code below is the html page I've created and it includes the JS in a tag.
<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>
Your problem was that you forgot to add () after your function name.
Beyond that, there are a few other things to correct:
Don't use inline HTML event attributes (onclick, onmouseover, etc.) as they:
- Create "spaghetti code" that is difficult to read and debug.
- Lead to duplication of code.
- Don't scale well
- Don't follow the separation of concerns development methodology.
- Create anonymous global wrapper functions around your attribute values that alter the
thisbinding in your callback functions. - Don't follow the W3C Event Standard.
- Can cause memory leaks in IE.
Instead, do all your work in JavaScript and use .addEventListener() to set up event handlers.
Don't use a hyperlink when a button (or some other element) will do. If you do use a hyperlink, you need to disable its native desire to navigate, which is done by setting the href attribute to #, not "".
// 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>
这篇关于点击链接时javascript功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
