Window.open und Parameter per Post-Methode übergeben

96

Mit der window.open-Methode öffne ich eine neue Site mit Parametern, die ich per Post-Methode übergeben muss. Ich habe eine Lösung gefunden, aber leider funktioniert sie nicht. Das ist mein Code:

<script  type="text/javascript">    
function openWindowWithPost(url,name,keys,values)
{
    var newWindow = window.open(url, name);

    if (!newWindow) return false;

    var html = "";
    html += "<html><head></head><body><form id='formid' method='post' action='" + url +"'>";

    if (keys && values && (keys.length == values.length))
        for (var i=0; i < keys.length; i++)
            html += "<input type='hidden' name='" + keys[i] + "' value='" + values[i] + "'/>";

    html += "</form><script type='text/javascript'>document.getElementById(\"formid\").submit()</sc"+"ript></body></html>";

    newWindow.document.write(html);
    return newWindow;
}
</script>

Als nächstes erstelle ich Arrays:

<script type="text/javascript">    
var values= new Array("value1", "value2", "value3") 
var keys= new Array("a","b","c") 
</script>

Und rufen Sie die Funktion auf von:

<input id="Button1" type="button" value="Pass values" onclick="openWindowWithPost('test.asp','',keys,values)" />

Wenn ich jedoch auf diese Schaltfläche klicke, ist die Site test.asp leer (natürlich versuche ich, Pass-Werte abzurufen - Request.Form("b")).

Wie könnte ich dieses Problem lösen, warum kann ich keine Passwerte erhalten?

javascript

— luk4443
quelle

2

Was funktioniert nicht? Ich habe eine Kopie unter jsfiddle.net/TZMMF gespeichert und sie funktioniert wie erwartet.

— PleaseStand

Danke für die Antwort. Ja, sorry - der obige Code funktioniert. Aber ich teste diese Funktion mit einem Array von Schlüsseln: <script type = "text / javascript"> var values = new Array ("value1", "value2", "value3") var keys = new Array ("1", "2 "," 3 ") // anstelle von a, b, c </ script> erhalte ich einen Wert von Request.Form (" 2 ") In IE und Firefox erhalte ich eine leere Seite.

— luk4443

120

Anstatt ein Formular in das neue Fenster zu schreiben (was mit der Kodierung von Werten im HTML-Code schwierig zu korrigieren ist), öffnen Sie einfach ein leeres Fenster und senden Sie ein Formular daran.

Beispiel:

<form id="TheForm" method="post" action="test.asp" target="TheWindow">
<input type="hidden" name="something" value="something" />
<input type="hidden" name="more" value="something" />
<input type="hidden" name="other" value="something" />
</form>

<script type="text/javascript">
window.open('', 'TheWindow');
document.getElementById('TheForm').submit();
</script>

Bearbeiten:

So legen Sie die Werte im Formular dynamisch fest:

function openWindowWithPost(something, additional, misc) {
  var f = document.getElementById('TheForm');
  f.something.value = something;
  f.more.value = additional;
  f.other.value = misc;
  window.open('', 'TheWindow');
  f.submit();
}

Um das Formular zu veröffentlichen, rufen Sie die Funktion mit den Werten wie auf openWindowWithPost('a','b','c');.

Hinweis: Ich habe die Parameternamen in Bezug auf die Formularnamen variiert, um zu zeigen, dass sie nicht identisch sein müssen. Normalerweise würden Sie sie ähnlich halten, um die Verfolgung der Werte zu vereinfachen.

— Guffa
quelle

Genau das habe ich mir gedacht. Der ursprünglich veröffentlichte Code schien jedoch zu funktionieren ... außer im Internet Explorer.

— PleaseStand

Danke für die Antwort. Aber ich habe eine Tabelle, in der in der Spalte Schaltflächen stehen. Wenn ich auf diese Schaltfläche klicke, öffne ich eine neue Seite und übergebe einige Parameter. Also muss ich eine Funktion schreiben und für jede Schaltfläche diese aufrufen und feste Argumente übergeben. Meine Frage, wie könnte ich Ihren obigen Code umschreiben, um zu funktionieren?

— luk4443

1

@ luk4443: Wenn Sie beim Öffnen des Fensters die URL verwenden, wird die Seite nur ersetzt, wenn Sie das Formular veröffentlichen. Fügen Sie die URL in die actionEigenschaft des Formulars ein.

— Guffa

1

@Guffa eine Möglichkeit, auch das Verhalten von zu simulieren target="_blank"?

— Everton

2

@EvertonAgner: Verwenden Sie einen eindeutigen Namen für das Fenster, und es funktioniert wie folgt _blank.

— Guffa

62

Da Sie das gesamte Formular im Javascript haben möchten, anstatt es in Tags zu schreiben, können Sie Folgendes tun:

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "openData.do");

form.setAttribute("target", "view");

var hiddenField = document.createElement("input"); 
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "message");
hiddenField.setAttribute("value", "val");
form.appendChild(hiddenField);
document.body.appendChild(form);

window.open('', 'view');

form.submit();

— Söldner
quelle

5

Keine auf jQuery und Pure JavaScript basierende Implementierung. Vielen Dank.

— Pawan Pillai

2

@Mercenary Seite ist hier in neuem Tab geöffnet. Kann ich die Seite in neuem Popup Fenster öffnen?

— Yaje

29

Obwohl ich 3 Jahre zu spät bin, aber um Guffas Beispiel zu vereinfachen, müssen Sie das Formular überhaupt nicht auf der Seite haben:

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').submit();

Bearbeitet:

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').appendTo('body').submit().remove();

Vielleicht ein hilfreicher Tipp für jemanden :)

— Andrius Naruševičius
quelle

7

Diese Lösung ist unvollständig. Es sollte zuerst dieses Formular zum Text hinzufügen und dann einreichen. Also wo steht .submit (); es sollte .appendTo ('body'). submit () sagen;

— Jonathan van de Veen

1

Ohne diesen Teil wird $("body").append(form);es nicht funktionieren

— Axel

4

Wenn Sie einen .remove()nach Jonathans Vorschlag hinzufügen .appendTo('body').submit(), bereinigen Sie sogar nach sich selbst und überladen die aktuelle Seite nicht mit Formularobjekten.

— Simon

24

Ich stimme der oben veröffentlichten Antwort des Söldners voll und ganz zu und habe diese Funktion für mich erstellt, die für mich funktioniert. Es ist keine Antwort, es ist ein Kommentar zum obigen Beitrag von Söldner

function openWindowWithPostRequest() {
  var winName='MyWindow';
  var winURL='search.action';
  var windowoption='resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1';
  var params = { 'param1' : '1','param2' :'2'};         
  var form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", winURL);
  form.setAttribute("target",winName);  
  for (var i in params) {
    if (params.hasOwnProperty(i)) {
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = i;
      input.value = params[i];
      form.appendChild(input);
    }
  }              
  document.body.appendChild(form);                       
  window.open('', winName,windowoption);
  form.target = winName;
  form.submit();                 
  document.body.removeChild(form);           
}

— Youdhveer
quelle

12

Sie können einfach target="_blank"auf dem Formular verwenden.

<form action="action.php" method="post" target="_blank">
    <input type="hidden" name="something" value="some value">
</form>

Fügen Sie versteckte Eingaben nach Ihren Wünschen hinzu und senden Sie das Formular einfach mit JS.

— Seebrücke
quelle

Außerdem window.openwürde da als Popup blockiert, wenn es nicht in einem clickHandler (oder einem vom Benutzer ausgelösten Ereignis wie diesem) aufgerufen wird

— Xenos

4

Ich habe eine Funktion zum Generieren eines Formulars erstellt, das auf URL, Ziel und einem Objekt als POST/ GETdata- und submit-Methode basiert . Es unterstützt verschachtelte und gemischte Typen in diesem Objekt, sodass jede Struktur, die Sie füttern, vollständig repliziert werden kann: PHP analysiert sie automatisch und gibt sie als verschachteltes Array zurück. Es gibt jedoch eine einzige Einschränkung: Die Klammern [und ]dürfen nicht Teil eines Schlüssels im Objekt sein (wie {"this [key] is problematic" : "hello world"}). Wenn jemand weiß, wie er richtig entkommen kann, sagen Sie es bitte!

Hier ist ohne weiteres die Quelle:

Code-Snippet anzeigen

function getForm(url, target, values, method) {
  function grabValues(x) {
    var path = [];
    var depth = 0;
    var results = [];

    function iterate(x) {
      switch (typeof x) {
        case 'function':
        case 'undefined':
        case 'null':
          break;
        case 'object':
          if (Array.isArray(x))
            for (var i = 0; i < x.length; i++) {
              path[depth++] = i;
              iterate(x[i]);
            }
          else
            for (var i in x) {
              path[depth++] = i;
              iterate(x[i]);
            }
          break;
        default:
          results.push({
            path: path.slice(0),
            value: x
          })
          break;
      }
      path.splice(--depth);
    }
    iterate(x);
    return results;
  }
  var form = document.createElement("form");
  form.method = method;
  form.action = url;
  form.target = target;

  var values = grabValues(values);

  for (var j = 0; j < values.length; j++) {
    var input = document.createElement("input");
    input.type = "hidden";
    input.value = values[j].value;
    input.name = values[j].path[0];
    for (var k = 1; k < values[j].path.length; k++) {
      input.name += "[" + values[j].path[k] + "]";
    }
    form.appendChild(input);
  }
  return form;
}

Erweitern Sie das Snippet

Anwendungsbeispiel:

document.body.onclick = function() {
  var obj = {
    "a": [1, 2, [3, 4]],
    "b": "a",
    "c": {
      "x": [1],
      "y": [2, 3],
      "z": [{
        "a": "Hello",
        "b": "World"
      }, {
        "a": "Hallo",
        "b": "Welt"
      }]
    }
  };

  var form = getForm("http://example.com", "_blank", obj, "post");

  document.body.appendChild(form);
  form.submit();
  form.parentNode.removeChild(form);
}

Erweitern Sie das Snippet

— Zeremonie
quelle

Hoppla, die URL im Verwendungsbeispiel war fehlerhaft. Wenn es behoben ist, gibt es keinen Fehler mehr.

— Zeremonie

1

Scheint immer noch kaputt zu sein, ich bekomme eine leere Seite.

— Adam Parkin

2

Ich habe eine bessere Möglichkeit gefunden, Parameter an das Popup-Fenster zu übergeben und sogar Parameter daraus abzurufen:

Auf der Hauptseite:

var popupwindow;
var sharedObject = {};

function openPopupWindow()
{
   // Define the datas you want to pass
   sharedObject.var1 = 
   sharedObject.var2 = 
   ...

   // Open the popup window
   window.open(URL_OF_POPUP_WINDOW, NAME_OF_POPUP_WINDOW, POPUP_WINDOW_STYLE_PROPERTIES);
   if (window.focus) { popupwindow.focus(); }
}

function closePopupWindow()
{
    popupwindow.close();

    // Retrieve the datas from the popup window
    = sharedObject.var1;
    = sharedObject.var2;
    ...
}

Im Popup-Fenster:

var sharedObject = window.opener.sharedObject;

// function you have to to call to close the popup window
function myclose()
{
    //Define the parameters you want to pass to the main calling window
    sharedObject.var1 = 
    sharedObject.var2 = 
    ...
    window.opener.closePopupWindow();
}

Das ist es !

Und das ist sehr praktisch, weil:

Sie müssen keine Parameter in der URL des Popup-Fensters festlegen.
Kein Formular zu definieren
Sie können unbegrenzte Parameter auch für Objekte verwenden.
Bidirektional: Sie können Parameter übergeben UND, wenn Sie möchten, neue Parameter abrufen.
Sehr einfach zu implementieren.

Habe Spaß!

— BlueMan
quelle

Hinweis: window.openerWird nicht von allen Browsern unterstützt.

— Raptor

1

Ich wollte dies in React mit einfachen Js und der Abruf- Polyfüllung tun . OP hat nicht gesagt, dass er speziell ein Formular erstellen und die Submit-Methode darauf aufrufen möchte. Deshalb habe ich die Formularwerte als json veröffentlicht:

examplePostData = {
    method: 'POST',
    headers: {
       'Content-type' : 'application/json',
       'Accept' : 'text/html'
    },
    body: JSON.stringify({
        someList: [1,2,3,4],
        someProperty: 'something',
        someObject: {some: 'object'}
    })
}

asyncPostPopup = () => {

    //open a new window and set some text until the fetch completes
    let win=window.open('about:blank')
    writeToWindow(win,'Loading...')

    //async load the data into the window
    fetch('../postUrl', this.examplePostData)
    .then((response) => response.text())
    .then((text) => writeToWindow(win,text))
    .catch((error) => console.log(error))
}

writeToWindow = (win,text) => {
    win.document.open()
    win.document.write(text)
    win.document.close()
}

0

Die Standardübermittlungsaktion ist Ext.form.action.Submit, die eine Ajax-Anforderung verwendet, um die Werte des Formulars an eine konfigurierte URL zu senden. Verwenden Sie die Konfigurationsoption standardSubmit, um die normale Browserübermittlung eines Ext-Formulars zu aktivieren.

Link: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-cfg-standardSubmit

Lösung: Setzen Sie standardSubmit: true in Ihre Konfiguration. Hoffe das hilft dir :)

— user2420964
quelle

0

Ich habe dies in der Vergangenheit verwendet, da wir normalerweise die Rasierersyntax zum Codieren verwenden

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { target = "_blank" }))

{

// füge verstecktes und hier abgelegtes Formular hinzu

}}

— Ransems
quelle