jquery在加载后在新窗口中按id附加innerHTML答案

【问题标题】：jquery append innerHTML by id in new window after loadjquery在加载后在新窗口中按id附加innerHTML
【发布时间】：2014-01-22 16:19:36
【问题描述】：

我正在尝试使用 jquery 来：

打开一个新窗口/标签（相同域，不同页面）
然后将文本添加到文本框 (id = "BUpdates_SQL_Statement")
然后点击这个按钮：<input type="submit" value="Apply Changes" name="BUpdates_Submit" id="BUpdates_Submit">
然后关闭窗口

这是起始页中的 onclick 元素（我们称之为 www.mydomain.com/firstpage）：

<li id="MainNav_Update"><span class="MainMenuText" onclick="runUpdateWindow();">Update</span></li>

这是我要在新窗口中编辑的区域（我们称之为 www.mydomain.com/secondpage）

<textarea id="BUpdates_SQL_Statement"></textarea>

<input type="submit" value="Apply Changes" id="BUpdates_Submit">
<a onclick="v$('BUpdates_Submit').click();return false;" href="javascript:void(0);"><span>Apply Changes</span></a>

旁注：v$('BUpdates_Submit').click();return false;" 用于另一个外部 js 文件，与我在这里尝试做的事情无关。这是我的jQuery：

   function runUpdateWindow() {
        var updateWindow = window.open("www.mydomain.com/secondpage", "blank");
    }
        var updateSQL = 'UPDATE TABLE ...';

        $(updateWindow).on("load", function (){
        $("BUpdates_SQL_Statement", updateWindow.document).append(updateSQL);

$('BUpdates_Submit').trigger('click');
        });

        updateWindow.close();

www.mydomain.com/secondpage 正在新标签页中打开，但 BUpdates_SQL_Statement 应该是：

<textarea id="BUpdates_SQL_Statement">
UPDATE TABLE...
</textarea>

但它仍然是空白的。

我真诚地感谢任何意见。提前致谢！

【问题讨论】：

相关：stackoverflow.com/questions/4167965/… 和 stackoverflow.com/questions/14735706/…
@icktoofay 我包含的代码突破了我的能力界限，因为我是一个完全的菜鸟。原谅众所周知的“愚蠢的问题”，但是，我将如何使用 AJAX？
@KateTheGreat：我添加了一个答案，应该概述您将如何使用它，假设您尝试提交的表单不是很复杂。

标签： javascript jquery html impersonation window.open

【解决方案1】：

据我了解，您正在尝试做的是自动填写和提交表单，并选择了一种看似相当简单的方式来做到这一点。不过，不管这是否有效，可能还有一种更简单的方法。

想想当你打开另一个页面，填写表格，然后按提交时会发生什么。如果它是一个没有 JavaScript 干扰的普通 HTML 表单，您可能只会收到一个 POST 请求。如果我有这个表格，请说：

<form action="run-sql" method="post">
    <textarea name="sql"></textarea>
    <input type="submit" value="Run query">
</form>

当我使用一些 SQL 提交它时，浏览器会向 run-sql 发送一个 POST 请求，并带有一个参数 sql。从 JavaScript 发出 POST 请求相对简单，至少与自动化另一个网页相比是这样。从 JavaScript 发出 HTTP 请求通常称为 AJAX，幸运的是，jQuery 使用 its $.post function 使这一切变得容易。

那么如何使用它呢？在那个具体的例子中，它就像这样简单：

var mySQL = "select * from employees";  // e.g.
jQuery.post("run-sql", {sql: mySQL}, function() {
    alert("Success!");
});

现在，有些表单没有这么简单，但值得一试，看看你的表单是否如此。

【讨论】：

【解决方案2】：

使用 iframe 而不是新窗口：

function runUpdateWindow() {
    var frame = document.createElement('iframe');

      frame.src = "www.mydomain.com/secondpage";

    document.body.appendChild(frame);

    var frameWindow = frame.contentWindow

    var updateSQL = 'UPDATE TABLE...';

    frameWindow.onload = function (){
        var textarea = frameWindow.document.getElementById("BUpdates_SQL_Statement");
        var button = frameWindow.document.getElementById("BUpdates_Submit");

        textarea.value = updateSQL;

frameWindow.v$('BUpdates_Submit').click();
    };

}

非常感谢 Dagg Nabbit 帮助我解决这个问题！

【讨论】：