获取用户输入以设置新的窗口参数
getting user input to set new window parameters
>我正在尝试让用户为新弹出窗口设置高度宽度和颜色 这是我一直在尝试的一些示例代码
<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,但没有奏效。 我是否使用错误的语法?
你必须将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/
将
用户输入值与新窗口的高度和宽度属性连接起来。试试这种方式,
.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小提琴
<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。
相关文章:
- Javascript窗口.打开令人困惑的参数
- javascript窗口打开并添加参数
- JS:执行'失败;getComputedStyle'在'窗口':参数的类型不是'
- 如何将参数传递到 UI 路由器状态的模式窗口
- 如何自定义数据::confirm弹出窗口以提示输入,该输入将附加到请求参数中
- 窗口clearInterval()在没有参数的情况下工作
- 为弹出窗口发布JSON参数
- 将参数从 JavaScript 中的剑道窗口刷新传递给控制器操作
- JavaScript 窗口['func'],参数返回 undefined 而不是函数
- 窗口.打开参数作为变量
- 弹出窗口将参数返回给父级
- 根据窗口大小在 jQuery 滑块上调用新参数
- 窗口、文档、数学、未定义作为类实例化的参数传递
- 有没有办法找到浏览器弹出窗口是否使用 window.open 打开了参数“滚动条=是”
- JavaScript 窗口重定向安全地传递参数 (POST)
- 单击窗口.位置,参数已传递
- 获取用户输入以设置新的窗口参数
- 将函数作为参数和弹出窗口阻止程序传递
- Javascript 窗口函数将“this”作为参数传递
- Adobe AIR (html/javascript): navigateToUrl's窗口参数不工作