Question

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

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

总的来说，我想：

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

这可能吗？怎么样？

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

Answer 1

正如您所观察到的，当脚本在当前窗口中加载新URL时，当前窗口中的所有脚本都将被销毁，因此无法在新加载的窗口上运行。

因此，您有以下选择：

将代码设置为将新加载的窗口修改为新加载的页面本身的启动顺序，以便在加载该页面时，它会自行运行所需的代码。
将一些参数传递给新加载的页面作为URL末尾的查询参数，然后使用新加载的页面中的代码处理这些查询参数，并在新页面加载时实现所需的任何启动操作。虽然实现此启动操作的代码必须位于新加载的页面中（如选项1中所示），但它仍然允许加载页面的代码通过将查询参数附加到加载的URL来指定在此次加载时发生的情况。因此，如果您加载的URL是http://whatever.com/foo.html，那么您可以将一些查询参数附加到http://whatever.com/foo.html?show=price&user=bob，并且该页面中的启动脚本可以查看这些查询参数并相应地执行操作。这允许URL的加载器将参数传递给页面中的启动代码。
找到一些可以在其他窗口中加载新网址的外部窗口（可能是iframe，但不必是iframe），观看加载，加载完成后，运行一些代码修改它。两个合作窗口必须位于相同的域（技术上相同的原点），以便Javascript允许这样做。

Answer 2

当然，@ bummi。好点子。以下是链接中描述的.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';

<强> II。 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.elements 1。

var getDatSearchBox = getDatForm.elements[1];

Gettin'所有互动都在这里。是的，请您的友好的Web用户提供他/她想要提示的内容。把它粘在一个变量中。

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

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

getDatSearchBox.value=nameToFind;

BOOM！提交表格。

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

};

使用附加的JavaScript加载新URL，然后将更多JS附加到该新URL

2 个答案: