如何使用下拉菜单打开新的 frame/window

Question

点击"Create node"按钮后，如何打开新的框架或window？我希望新框架包含一个文本字段和下拉菜单，以便用户可以 select 一个选项。

<form>
<html>
<body>
  <button onclick="myFunction()">Create node</button><br>
  <br>
  <button onclick="myFunction()">Search node</button><br>
  <br>
  <button onclick="myFunction()">Create Realationship</button><br>
</body>
</html>
</form>

根据上面的代码，我可以创建并单击按钮，但无法创建新框架，而且我不知道如何为用户提供选项 select。

Answer 1

我想你是这个意思：

var myFunction = function() {
   //create some html elements with the createElement function
    var select = document.createElement("select"),
        input = document.createElement("input");
    var head = document.createElement("h2");
    var option1 = document.createElement("option");
    var option2 = document.createElement("option");

    //change the content of elements
    head.innerHTML = "select and edit option";

    option1.innerHTML = "option 1";
    option2.innerHTML = "option 2";
    //you can add an element to another element with element.appendChild("new child element here")

    select.appendChild(option1);
    select.appendChild(option2);

    //you can set all attributes with element.setAttribute("attribute name", "attribute value")
    input.setAttribute("type", "text");

    //open a window, with no url and a specified width and height
    var w = window.open('', "", "width=600, height=400, scrollbars=yes");

    //again add children elements, but now insert them to the created window which is stored in the 'w' variable (note that it does not replaces the document, it only means that you represent another window)
    w.document.body.appendChild(head);
    w.document.body.appendChild(select);
    w.document.body.appendChild(input);
}

fiddle 这里：http://jsfiddle.net/tkf4cnqo/5/

您也可以加载预定义的 url，但很难使其动态化。

希望对您有所帮助。

Answer 2

一开始你的代码是不合适的。 <form> 应该在正文中创建，<html> 应该是文档中的第一个标签。接下来，如果我理解正确的话，您只是想在单击任何按钮后创建一个新的 window。

您可以简单地创建一个名为 myFunction 的函数并将 window.open('http://google.com') 传递给它。您可以在其中使用任何您想要的 url，因此如果您的网站是 http://example.com，您可以在 http://example.com/node1.html 处创建一个带有按钮和文本字段的页面，然后您将更改 window.open('http://google.com')至 window.open('http://example.com/node1.html)`

<html>

    <head>

    </head>
<body>

<script>
    function myFunction() {
        window.open("http://google.com");
    }
</script>

<button onclick="myFunction()">Create Node</button>

</body>


</html>

如何使用下拉菜单打开新的 frame/window

How to open a new frame/window with dropdown menu

html

javascript

drop-down-menu