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');" />

我也尝试将高度设置为变量并说高度height = heightVar并且没有用。是否有一些使用错误的语法？

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

＆＃13;

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

＆＃13;

＆＃13; 如果你不使用jQuery，你不需要在getElementById中使用索引

Answer 3

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

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

jsFiddle

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

3 个答案: