获取用户输入以设置新的窗口参数

Question

>我正在尝试让用户为新弹出窗口设置高度宽度和颜色 这是我一直在尝试的一些示例代码

<input type = "button" value = "Open New Window" 
                onclick = "NewWin = window.open('','NewWin',
                    'toolbar=no,status=no,width=200,height=document.getElementsByName('height')[0].value');" />

我还尝试将高度设置为变量并说高度高度=高度Var，但没有奏效。 我是否使用错误的语法？

Answer 1

你必须将javascript与标记分开。这是在 HTML/Javascript 中进行开发的常见最佳实践。我在jsfiddle中举了一个例子：

.HTML：

<h1>New Window properties</h1>
<div>
    <label for="windowWidth">Width:</label><br />
    <input id="windowWidth" type="number" value="200" />
</div>
<div>
    <label for="windowHeight">Height:</label><br />
    <input id="windowHeight" type="number" value="200" />
</div>
<div>
    <input id="newWindow" type="button" value="Open New Window" />
</div>

Javascript：

var newWindowButton,  // Reference to the button we can click on
    newWindowWidth,   // We can provide a width for the new window, defaults to 200 px
    newWindowHeight;  // We can provide a height for the new window, defaults to 200 px
newWindowButton = document.getElementById('newWindow');
newWindowButton.onclick = function () {
    var newWindowUrl,
        newWindowName,
        newWindowOptions;
    newWindowWidth = document.getElementById('windowWidth').value;
    newWindowHeight = document.getElementById('windowHeight').value;
    newWindowUrl = '';
    newWindowName = 'NewWin';    
    newWindowOptions = 'toolbar=no,status=no,width='+newWindowWidth+',height='+newWindowHeight;    
    window.open(newWindowUrl, newWindowName, newWindowOptions);
};

http://jsfiddle.net/yg9jeyza/2/

Answer 2

将

用户输入值与新窗口的高度和宽度属性连接起来。试试这种方式，

.HTML：

Height : <input type="text" id="height" /><br/>
Width : <input type="text" id="width" />
<input type="button" id="newWindow" value="New Window" />

javaScript ：

newWindow.onclick = function(){
    window.open("http://www.google.com/", "A", "height="+ document.getElementById("height").value + "," + "width=" + document.getElementById("width").value);
};

或者，jQuery ：

$("#newWindow").on("click", function(){
    window.open("http://www.google.com/", "A", "height="+ $('#height').val() + "," + "width=" + $("#width").val());
});

js小提琴

Answer 3

<input id="height" type="number" />
<input type="button" value="Open New Window" onclick="openNewWindow()" />
<script type="text/javascript">
      openNewWindow = function () {
      var height = document.getElementById('height').value;
      window.open('','newWin','toolbar=no,status=no,width=200,height=' + height);
  }
</script>

如果你不使用jQuery，你就不需要在getElementById中使用index。