Question

我是javascript和堆栈溢出的新手，只是想知道这是否是将按钮onclick中的内容替换为另一个页面的正确方法？因为它不适用于我的情况。这是我的代码：

的javascript：

function newpage(){
    var oldHTML = document.getElementById('cambtn').onclick;
    var newHTML = "window.location='http://curv.info";
    document.getElementById('cambtn').onclick = newHTML;
}

HTML：

<button name="cambtn" onclick="camera();"><img id="camicon" src="Glitcher-03.png" alt="Camera" width="120" style="position:absolute; left:50px; top:50px;"></button>
<button name="btn" onclick="newpage()"></button>

Answer 1

一般方法：

JS：

function newPage(){
    document.getElementById("cambtn").onclick=function(){
      window.location.assign("http://curv.info");
    };
}

HTML：

<button id="cambtn">...</button>
<button onclick="newPage();">Go</button>

Answer 2

虽然您可以使用简单的字符串（onclick）将元素的onclick="somecode"设置为HTML属性，但您无法使用JavaScript执行相同操作。相反，您应该创建一些可以执行所需操作的函数，并将该函数设置为onclick属性：

function f() { somecode }
document.getElementById("someid").onclick = f

Answer 3

<button id="cambtn" onclick="camera();"><img ...></button>
<button id="btn">Button</button>

document.getElementById("btn").addEventListener("click", function(){
    document.getElementById("cambtn").onclick = function(){
        location.href = "http://curv.info";
    });
});

Answer 4

如果iframe是一个选项，您可以执行以下操作：

<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
    <style>
    #page{width:600px;height:400px;margin:0 auto;}
    </style>
    <script type="text/javascript">
    function oldhtml() { 
        document.getElementById("page").innerHTML = "<iframe src'http://www.google.com'></iframe>"  //loads html from another page

        }
   function newhtml() {
    document.getElementById("page").innerHTML = "<div style='width:100px;height:100px;background:black;color:#fff;'>NEW HTML</div>";  //loads static html 
   }
   </script>
</head>
<body>

</body>
    <button id="old" onclick="oldhtml()">Old HTML</button><br><br>
    <button id="new" onclick="newhtml()">NEW HTML</button>
    <div id="page"></div>
</html>

将按钮onclick内容替换为另一个网页

4 个答案: