制作一个 javascript 小书签，发布当前 URL

Question

我正在尝试制作一个 javascript 小书签，将 post 当前 URL 发送到我的 API。例如，类似于 Instapaper 小书签的功能。我写了下面的脚本，通过一个缩小器传递它并将它作为 href 添加到我用作按钮的 <a> 标签中。我希望能够将这个标签拖到书签栏。

javascript: (function() {
  var url = document.location.href
  var uri = "http://localhost:3001/api/v1/links/bookmarklet?url=" + url + "&id=1"

  xhr = new XMLHttpRequest();
  xhr.open("POST", encodeURI(uri));

  xhr.send();
}());

目前我只是在 localhost:3001 的本地服务器上对此进行测试，运行我的应用程序在 localhost:3000。如果我在我的应用程序上按下按钮（在 localhost:3000），它会发出 post 请求，但它会将脚本本身添加到当前 url 顶部的地址栏。

http://localhost:3000/!function()%7Bvar%20e=%22http://localhost:3001/api/v1/links/bookmarklet?url=%22+document.location.href+%22&id=1%22;xhr=new%20XMLHttpRequest,xhr.open(%22POST%22,encodeURI(e)),xhr.send()}();

如果我将按钮拖到书签栏并从另一个站点单击它，它会重定向回 localhost:3000 并执行相同的操作。我在这里遗漏了一些明显的东西吗？我真的无法在网上找到任何关于如何将小书签实现到 post 当前 URL 的说明。

HTML 看起来像这样：

  <a href='!function(){var e="http://localhost:3001/api/v1/links/bookmarklet?url="+document.location.href+"&id=1";xhr=new XMLHttpRequest,xhr.open("POST",encodeURI(e)),xhr.send()}();' id="button">post link</a>

我的 Rails API 的传入参数看起来像这样

<ActionController::Parameters {"url"=>"http://localhost:3000/!function()%7Bvar%20e=%22http://localhost:3001/api/v1/links/bookmarklet?url=%22 document.location.href %22", "id"=>"1", "xhr"=>"new%20XMLHttpRequest,xhr.open(%22POST%22,encodeURI(e)),xhr.send()}()", "format"=>:json, "controller"=>"api/v1/links", "action"=>"create_link_from_web"} permitted: false>

所以它 post 到 Rails 中的正确路线，但它全都搞砸了。非常感谢您的建议！

Answer 1

您的 href 属性被认为是相对路径，在字符串中没有显式协议，例如http: 或 javascript:，等等。这就是为什么它将原始域添加到您的 URL 字符串。

请记住，小书签并非适用于所有浏览器，因此请确保您至少与目标受众兼容。

要解决此问题，请将您的 HTML 更改为

<a href='javascript:!function(){var e="http://localhost:3001/api/v1/links/bookmarklet?url="+document.location.href+"&id=1";xhr=new XMLHttpRequest,xhr.open("POST",encodeURI(e)),xhr.send()}();' id="button">post link</a>

制作一个 javascript 小书签，发布当前 URL

Making a javascript bookmarklet that POSTs current URL

html

javascript

post

bookmarklet