书签：转到页面并填写表格答案

【问题标题】：Bookmarklet: go to page & fill in form书签：转到页面并填写表格
【发布时间】：2021-04-04 12:38:11
【问题描述】：

我想为a site where you can watch videos with any subtitle .srt file 制作一个书签。目的是我可以直接从 YouTube（或 DailyMotion，或...）视频页面点击它，并立即传送到 https://tubecc.herokuapp.com/，所需的视频网址 已经填写。

我目前的尝试是：

javascript:{vidurl=document.location.href;document.location.href=('https://tubecc.herokuapp.com');document.getElementById("url").value=vidurl;void(0);}

但是，这一切只是导航到网站 - 它没有填写框中的 url。

当我尝试用一些无意义的文本填写 url 框作为单独的操作时 - 即我已经在 https://tubecc.herokuapp.com/ 上，只需从控制台运行 document.getElementById("url").value="foobar"，或者制作一个单独的书签，其中仅包含 @987654327 @，它确实工作 - 'foobar' 出现在文本框中，正如预期的那样。

只有在与首先导航到页面的较大书签组合时，它似乎才会失败。有一次我怀疑这与异步性有关，所以我添加了延迟填充 (javascript:{vidurl=document.location.href;document.location.href('https://tubecc.herokuapp.com');setTimeout(() => { document.getElementById("url").value="foobar"; }, 2000);void(0);})，但这似乎也没有帮助。

PS：不是this question 的复制品——那里描述了基本原理，我正在应用它。我的问题是为什么在这种特定情况下会出错。

【问题讨论】：

嗨，你在哪里运行这个 javascript 代码？测试？
我在 Chrome 小书签中运行它。

标签： javascript bookmarklet

【解决方案1】：

再看这一行：

javascript:{vidurl=document.location.href;document.location.href=('https://tubecc.herokuapp.com');document.getElementById("url").value=vidurl;void(0);}

当我们在网页上运行它时，document.location.href=('https://tubecc.herokuapp.com') 会更改位置。所以当 'https://tubecc.herokuapp.com' 被加载时，没有运行 JavaScript 代码。

要实现您正在寻找的功能，您可以使用 localstorage 将视频 URL 存储在浏览器中。然后重定向到你的页面。

最后，您需要在“https://tubecc.herokuapp.com”网页中添加一个启动脚本。

书签：

window.localStorage.setItem('videoURL')=document.location.href;
document.location.href('https://tubecc.herokuapp.com')

在“https://tubecc.herokuapp.com”中启动脚本：

let url = window.localStorage.getItem('videoURL');
document.getElementById("url").value=url;

【讨论】：

您好，澄清一下 - tubecc.herokuapp.com 网页不属于我。这只是我正在使用的资源。在这个故事中，我自己创建的唯一东西就是书签。

【解决方案2】：

当您设置location.href 时，浏览器导航到新页面并卸载所有当前正在运行的 JavaScript。

要实现您想要的，您还需要一个浏览器扩展程序 User JavaScript and CSS（或任何用户脚本管理器，如 Tampermonkey），以便在 tubecc.herokuapp.com 上自动运行 JavaScript 代码。

使用此小书签导航至tubecc.herokuapp.com：

javascript: (() => {
  document.location.href = `https://tubecc.herokuapp.com?url=${document.location.href}`;
})();

在浏览器扩展中使用此代码：

const params = new URLSearchParams(document.location.search);
const url = params.get('url');

url && (document.getElementById('url').value = url);

【讨论】：