Question

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

Answer 1

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

除此之外，还有一些其他问题需要纠正：

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

创建＆＃34;意大利面条代码＆＃34;这很难阅读和调试。
导致代码重复。
不要好好扩展
请勿遵循 separation of concerns 开发方法。
围绕属性值创建匿名全局包装函数，这些函数会改变回调函数中的this绑定。
请勿关注 W3C Event Standard 。
可以导致 memory leaks in IE 。

Even MDN agrees

相反，请在JavaScript中完成所有工作并使用 .addEventListener() 设置事件处理程序。

当按钮（或其他元素）执行操作时，请勿使用超链接。如果您确实使用了超链接，则需要禁用其原生的导航愿望，方法是将href属性设置为#，而不是""。

＆＃13;

// 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);
}

＆＃13;

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

＆＃13;

Answer 2

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

null

应该是：

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

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

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

Answer 3

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

Answer 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函数不起作用

4 个答案: