javascript function doesn't work when link is

2018-12-31 01:28发布

站内问答 / JavaScript
796 4 6

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>

4条回答
唯独是你
2楼-- · 2018-12-31 01:45

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:

  1. Create "spaghetti code" that is difficult to read and debug.
  2. Lead to duplication of code.
  3. Don't scale well
  4. Don't follow the separation of concerns development methodology.
  5. Create anonymous global wrapper functions around your attribute values that alter the this binding in your callback functions.
  6. Don't follow the W3C Event Standard.
  7. 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>

查看更多
0人赞 添加讨论(0) 举报
呛了眼睛熬了心
3楼-- · 2018-12-31 01:51

You have a syntax error in your function declaration (missing parenthesis):

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

Should be:

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

You also need to prevent the default event for the link

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

查看更多
0人赞 添加讨论(0) 举报
与君花间醉酒
4楼-- · 2018-12-31 01:51

This is a syntax error. Parenthesis are required no matter the parameters of the function. However, it is a good practice to place script tags at the bottom of the body tag.

查看更多
0人赞 添加讨论(0) 举报
与君花间醉酒
5楼-- · 2018-12-31 02:03

You can use javascript:void(0). 

    <a href="javascript:void(0)" onclick='getContent(event)'> LoremIpsum</a>

Or return false on javascript

     <script type="text/javascript">
function getContent(){

    document.getElementById("contentFrame").src="LoremIpsum.html";
    return false;

}
</script>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)