加载新的 URL 并附加 JavaScript，然后将更多 JS 附加到新的 URL

Question

我有一个书签，将 JavaScript 附加到一个页面，导致该页面加载另一个页面（使用 window.location.assign(newURL)）。

加载新 URL 后，我想通过附加另一个脚本与新 URL 上的元素进行交互。

总的来说，我想：

单击弹出提示的书签window 询问搜索词
输入搜索词后，加载搜索页面URL
将搜索词拖放到搜索页面的搜索词输入框中。请注意，搜索是在幕后进行的——URL 不会改变以反映搜索词，就像您在 Google 中看到的那样。（它正在搜索 Plone 站点中的用户列表。）
运行搜索

这可能吗？怎么样？

我试过 setInterval、setTimeout、onreadystatechange、hashchange...但问题是当新页面加载时，先前附加到原始页面的脚本被清除（这似乎合乎逻辑）。

Answer 1

如您所见，当脚本在当前 window 中加载新的 URL 时，当前 window 中的所有脚本都会被销毁，因此无法对新加载的脚本进行操作window.

因此，您有以下选择：

将修改新加载的代码 window 放入新加载的页面本身的启动序列中，以便在该页面加载时，它运行是所需的代码自身。
在URL末尾将一些参数作为查询参数传递给新加载的页面，然后在新加载的页面中使用代码处理这些查询参数并实现任何启动操作你想要在新页面加载时。虽然实现此启动操作的代码必须在新加载的页面中（如选项 1），但它仍然允许加载页面的代码通过将查询参数附加到已加载的 [=32 来指定本次加载时发生的情况=].因此，如果您正在加载的 URL 是 http://whatever.com/foo.html，那么您可以将一些查询参数附加到它，例如 http://whatever.com/foo.html?show=price&user=bob，并且该页面中的启动脚本可以查看这些查询参数并采取相应的行动.这允许 URL 的加载程序将参数传递给页面中的启动代码。
找一些可以在其他window中加载新URL的外部window（也许是iframe，但不一定是iframe ), 观察它的加载，当它完成加载时，运行一些代码来修改它。两个合作 windows 必须在同一个域（技术上相同的来源）才能 Javascript 允许这样做。

Answer 2

好的，@bummi。好点子。这是 link.

中描述的 .js 文件

我。 JS 文件 1

您可以通过使用 URL 结构的书签将其附加到您的文档中：

javascript:(function(){document.body.appendChild(document.createElement('script')).src='jsFile1.js';})();

jsFile1.js的代码：

创建一个包含新元素的变量：

    var ifrm = document.createElement("IFRAME");

选择要加载到 ifrm 的页面：

    ifrm.setAttribute("src", "http://www.monkeyseatkoalas.blahblah");

iframe 的一些样式：

    ifrm.style.width = 100+"%"; 
    ifrm.style.height = 600+"px";

将新内容附加到我们所在页面的正文中。注意事项：<iframe> 和以这种方式玩弄它只有在您将所有内容都放在一个域中时才有效。因此，如果您在 XYZ 站点上，则您在 iframe 中加载的页面也需要来自 XYZ 站点。

   document.body.appendChild(ifrm);

现在我们的文档上有了一个 iframe。我们知道它的位置是 [0]，因为我们读到 all about frames right here。那么现在让我们做一些奇怪的事情——让我们将另一个 JavaScript 文件附加到这个新的 iframe 页面。为什么？因为这使得使用新的 JS 文件操作该页面变得容易。给你：

frames[0].document.body.appendChild(frames[0].document.createElement('script')).src='jsFile2.js';

二． JS 文件 2

在整个野兽装载完毕之前，我们不想做任何事情。否则，我们可能无法访问我们想要的东西，或者我们基于页面中的元素所做的计算可能无法正常工作。不过，这是你的电话。您可以运行在加载的较早阶段执行此操作。

window.onload = function () { // more code to come below...

你看，“.forms”是个不错的把戏。 w00t！便利！在 var getDatForm 的括号中，我们有表单的 ID。如果没有，那就给它一个，让你的生活更轻松。如何？唔。我觉得...

document.forms[numberOfFormElementOnThePage].setAttribute('id', 'mySpecialCupcakeFormCheeseName');

继续我们的思路，这里设置var getDatForm:

var getDatForm = document.forms["IDofYourForm"];

好吧，我们需要找到并存储我们想要用某些东西填充的盒子。所以我们只是使用我们的表单，很好地固定在一个变量中，然后对它进行超级方便的 .elements[x] 。在某种形式中，这是指 <input> 标记。因此，您表单中的第一个 <input> 标记将是 yourForm.elements[0]。就我而言，我需要 yourForm.elements1.

var getDatSearchBox = getDatForm.elements[1];

在这里进行所有互动。是的，请您友好的 Web 用户提供一些 he/she 想要通过提示查找的内容。将其粘贴到变量中。

var nameToFind = prompt('Word to hunt for? Name? Ice cream? Doggy?');

使用该文本使用值更新您的搜索框（在变量 getDatSearchBox 中）。

getDatSearchBox.value=nameToFind;

砰！提交您的表格。

document.forms["users_search"].submit();

};

加载新的 URL 并附加 JavaScript，然后将更多 JS 附加到新的 URL

Load a new URL with appended JavaScript, then append more JS to that new URL

javascript

append

window.location