Window.open і передавати параметри методом post

97

За допомогою методу window.open я відкриваю новий сайт з параметрами, які мені потрібно пройти методом публікації. Я знайшов рішення, але, на жаль, він не працює. Це мій код:

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

Далі я створюю масиви:

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

І функцію виклику:

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

Але, коли я натискаю на цю кнопку, сайт test.asp порожній (звичайно, я намагаюся отримати значення пропуску - Request.Form("b")).

Як я міг вирішити цю проблему, чому я не можу отримати прохідні значення?

javascript

— luk4443
джерело

2

Що не працює? Я зберіг копію за адресою jsfiddle.net/TZMMF, і вона працює належним чином .

— Будь ласка, продовжте

Дякуємо за відповідь Так, вибачте - наведений вище код працює. Але я перевіряю цю функцію з масивом клавіш: <script type = "text / javascript"> var values = new Array ("value1", "value2", "value3") var keys = new Array ("1", "2 "," 3 ") // замість a, b, c </script> я отримую значення за допомогою Request.Form (" 2 ") В IE та Firefox я отримую порожню сторінку.

— luk4443

121

Замість того, щоб записувати форму в нове вікно (що складно виправити, з кодуванням значень у HTML-коді), просто відкрийте порожнє вікно та опублікуйте форму в ньому.

Приклад:

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

Редагувати:

Щоб динамічно встановлювати значення у формі, ви можете зробити так:

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

Щоб опублікувати форму, ви викликаєте функцію зі значеннями, наприклад openWindowWithPost('a','b','c'); .

Примітка. Я змінив назви параметрів стосовно імен форм, щоб показати, що вони не повинні бути однаковими. Зазвичай ви тримаєте їх схожими один на одного, щоб спростити відстеження значень.

— Гуффа
джерело

Саме про це я і думав. Оригінал опублікованого коду, здається, працює, хоча ... за винятком IE.

— Будь ласка, стоять

Дякуємо за відповідь Але в мене є таблиця, де в стовпці є кнопки. Коли я натискаю цю кнопку, відкриваю нову сторінку і передаю деякі параметри. Тому я повинен написати функцію, і для кожної кнопки викликати її та передавати фіксовані аргументи. Моє запитання, як я можу переписати Ваш вищевказаний код для функціонування?

— luk4443

1

@ luk4443: Якщо ви використовуєте URL, коли відкриєте вікно, сторінка буде просто замінена, коли ви публікуєте форму. Введіть URL-адресу у actionвластивість форми.

— Гуффа

1

@Guffa будь-який спосіб також імітувати поведінку target="_blank"?

— Евертон

2

@EvertonAgner: Використовуйте унікальне ім'я для вікна, і воно буде працювати як _blank.

— Гуффа

62

Оскільки ви хотіли всю форму всередині javascript, замість того, щоб писати її в тегах, ви можете зробити це:

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

— Найманці
джерело

5

Немає jQuery та чистої JavaScript-реалізації. Дякую.

— Pawan Pillai

2

Сторінка @Mercenary відкрита у новій вкладці тут, чи можу я відкрити сторінку у новому спливаючому вікні?

— Yaje

29

Хоча я запізнився на 3 роки, але, щоб спростити приклад Гуффи, вам навіть не потрібно мати форму на сторінці взагалі:

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

Відредаговано:

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

Можливо, корисна порада для когось :)

— Андріус Нарушевічус
джерело

7

Це рішення неповне. Спочатку слід додати цю форму, а потім подати її. Так де це написано .submit (); слід сказати .appendTo ('body'). submit ();

— Джонатан ван де Вен

1

Без цієї частини $("body").append(form);не вийде

— Axel

4

Якщо ви додасте знак .remove()після запропонованого Джонатаном .appendTo('body').submit(), ви навіть приберете за собою і не захаращуватимете поточну сторінку об’єктами форми.

— Саймон

24

Я повністю згоден з відповіді найманця , розміщеною вище, і створив для мене цю функцію, яка працює для мене. Це не відповідь, це коментар до вищезгаданого повідомлення найманця

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
джерело

12

Ви можете просто скористатися target="_blank"формою.

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

Додайте приховані вкладені вами способи, а потім просто надішліть форму за допомогою JS.

— Пристань
джерело

Крім того, оскільки window.openбуде заблоковано як спливаюче вікно, коли його не викликатимуть clickобробник (або будь-яка подія, яка

— запускає

4

Я створив функцію для створення форми на основі url, target та об’єкта як метод POST/ GETdata та submit. Він підтримує вкладені та змішані типи всередині цього об'єкта, тому він може повністю відтворити будь-яку структуру, якою ви його подаєте: PHP автоматично аналізує її та повертає у вигляді вкладеного масиву. Однак існує одне обмеження: дужки [і ]не повинні бути частиною будь-якого ключа в об'єкті (наприклад{"this [key] is problematic" : "hello world"} ). Якщо хтось знає, як це правильно уникнути, будь ласка, скажіть!

Без зайвих помилок, ось джерело:

Показати фрагмент коду

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

Розгорніть фрагмент

Приклад використання:

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

Розгорніть фрагмент

— Церемонія
джерело

На жаль, URL-адреса у прикладі використання була неправильно сформована. якщо це виправлено, то помилки більше не буде.

— Церемонія

1

Все ще здається зламаним, я отримую порожню сторінку.

— Адам Паркін,

2

Я знайшов кращий спосіб передати параметри до спливаючого вікна і навіть отримати параметри з нього:

На головній сторінці:

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;
    ...
}

У спливаючому вікні:

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

Це воно !

І це дуже зручно, оскільки:

Вам не потрібно встановлювати параметри в URL-адресі спливаючого вікна.
Немає форми для визначення
Можна використовувати необмежені параметри навіть об’єктів.
Двонаправлений: ви можете передавати параметри І, якщо хочете, можете отримувати нові параметри.
Дуже простий у виконанні.

Веселіться!

— BlueMan
джерело

Примітка: window.openerпідтримується не у всіх браузерах.

— Raptor

1

Я хотів зробити це в React, використовуючи прості Js та вибірку polyfill . OP не сказав, що він спеціально хоче створити форму і викликати на ній метод submit, тому я зробив це, опублікувавши значення форми як json:

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

Дією надсилання за замовчуванням є Ext.form.action.Submit, що використовує запит Ajax для подання значень форми до налаштованої URL-адреси. Щоб увімкнути нормальну подачу форми Ext у веб-переглядачі, використовуйте параметр конфігурації standardSubmit.

Посилання: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-cfg-standardSubmit

рішення: помістіть standardSubmit: true у вашу конфігурацію. Сподіваюся, що це вам допоможе :)

— user2420964
джерело

0

Я використовував це раніше, оскільки зазвичай ми використовуємо синтаксис бритви для кодування

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

{

// додаємо прихований і подану тут форму

}

— рансеми
джерело