Question

此脚本将打开一个新网站的新页面。如何通过复选框操作它出现的窗口？例如，如果选中滚动条的复选框，我该如何将其添加到新窗口？

    <!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title></title>

    <script>


             function go(){

                var  myWindow;
                var urlValue = document.getElementById("urlValue").value;

                    //radio buttons
                    if(yes.checked){

                        myWindow = window.open(urlValue);
                    }

                    else if (no.checked ){
                        myWindow = window.open(urlValue, "_self"); 
                        }



                    //checkbox loop
                    /*
                    for (i=0; i<document.myForm.checkGroup.length; i++){
                        if (document.myForm.checkGroup[i].checked==true)
                        alert("Checkbox at index "+i+" is checked!")
                        }
                    */

              }

    </script>

  </head>
  <body>
    <form name="myForm">

      <p><label>Enter URL with http:// here: </label> <input id="urlValue" type="text"></p>
      <p><label>Would you like to open a new window?<br>
          <input name="yesNo" id="yes" type="radio">Yes<br>
          <input name="yesNo" id ="no" type="radio">No </label></p>
      <p><label>Other Options</label> <br>
        <input name = "checkGroup" id="fullScreen" type="checkbox">Full Screen<br>
        <input name = "checkGroup" id="scrollBar" type="checkbox">Scroll Bar<br>
        <input name = "checkGroup" id="statusBar" type="checkbox">Status Bar<br>
        <input name = "checkGroup" id="toolBar" type="checkbox">Tool Bar<br>
      </p>
      <p><input id="goButton" value="GO" type="button" onclick = "go()"></p>
    </form>

  </body>
</html>

Answer 1

此方法在现代浏览器中已弃用...

不再隐藏状态栏，您无法再隐藏已打开网页的滚动条。全屏也不像在旧浏览器中那样工作，现在有一个浏览器API可以用来将浏览器切换到全屏模式，但你不能通过父窗口，在window.open()。

以下是一个如何在旧浏览器中运行的示例：
http://jsfiddle.net/MyajZ/

在现代浏览器中，它仍会使用无工具栏打开新窗口，并切换到全屏模式，但会立即恢复正常状态...

顺便说一下，我发现了这种管理复选框的简单方法：

var params = "";
params += scrollBar.checked ? "scrollbars=yes," : "scrollbars=no,";
params += statusBar.checked ? "status=yes," : "status=no,";
params += toolBar.checked   ? "toolbar=yes" : "toolbar=no";
params += fullScreen.checked? ",type=fullWindow,fullscreen" : "";

// ...
myWindow = window.open(urlValue, "Window Name", params);

变量params的示例结果：

scrollbars=no,status=no,toolbar=no,type=fullWindow,fullscreen

Answer 2

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
  <title>Window opener</title>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var windowOpenerForm;

      windowOpenerForm = $('#windowOpenerForm');

      windowOpenerForm.submit(function (e) {
        var url,
            isNewWindow,
            windowOptions,
            windowTarget,
            windowSpecs;

        e.preventDefault();

        url = 'http://' + $('#urlValue', windowOpenerForm).val();
        isNewWindow = $('input[name="openNewWindow"]:checked',
                        windowOpenerForm).val();
        windowOptions = extractWindowOption(
                          $('input[name="windowOptions"]',
                            windowOpenerForm));
        windowTarget = isNewWindow === 'yes' ? '_blank' : '_self';
        windowSpecs = [
            'fullscreen=' + windowOptions.fullScreen,
            'scrollbars=' + windowOptions.scrollBar,
            'status=' + windowOptions.statusBar,
            'toolbar=' + windowOptions.toolBar
          ].join(',');

        window.open(url, windowTarget, windowSpecs);
      });

      function extractWindowOption(winOptions) {
        var opt = {};

        winOptions.each(function (index, elem) {
            opt[$(elem).val()] = $(elem).is(':checked') ?'yes' : 'no';
          });

        return opt;
      }
    });
  </script>
</head>
<body>
  <form name="myForm" id="windowOpenerForm">
    <p>
      <label>Enter URL with http:// here: </label>
      <input id="urlValue" type="text">
    </p>
    <p>Would you like to open a new window?<br>
      <input name="openNewWindow" type="radio" value="yes" checked>Yes<br>
      <input name="openNewWindow" type="radio" value="no">No
    </p>
    <p>Other Options<br>
      <input name="windowOptions" value="fullScreen" type="checkbox">Full Screen<br>
      <input name="windowOptions" value="scrollBar" type="checkbox">Scroll Bar<br>
      <input name="windowOptions" value="statusBar" type="checkbox">Status Bar<br>
      <input name="windowOptions" value="toolBar" type="checkbox">Tool Bar<br>
    </p>
    <p><input value="GO" type="submit"></p>
  </form>
</body>
</html>

如何通过复选框将滚动条等内容添加到新窗口？

2 个答案: