javascript 的简单任务 - 书签

Question

这是一个简单的表单，其中包含一个文本字段、一个下拉字段和一个提交按钮，如下所示：我创建了一个名为 script.js 的 js 文件：

<form action=" ">
  Name: <input type="text" name="name">
  Category <select name="category">
    <option value="volvo">First</option>
    <option value="saab">Second</option>
    <option value="fiat">Third</option>
  </select>
  <br>
  <input type="submit">
</form>

在我的 index.html 我有这个：

<html>
<body>
<script type="text/javascript" src="script.js"></script>

 <p><a href="javascript:(function(){my_script=document.createElement('SCRIPT');my_script.type='text/javascript';my_script.src='script.js?x=';"> Bookmarklet</a></p>
</body>
</html>

基于这篇文章how-to-make-a-bookmarklet-for-your-web-application我可以做到这一点，因为有 InstaCalc Bookmarklet 示例。
上面写着 "Open/overlay a new page. Open a new page or draw a window on the current one, like a sidebar`"

但是如何让我的表格看起来不像那个例子？请帮助，我应该怎么做才能在这个书签中调用 script.js 以便下面的表格显示为侧边栏或弹出窗口？请帮忙！

编辑：

我想使用 ajax 请求保存这些数据 name 和 category。这是一个 google 电子表格，我想在其中保存这些数据 https://docs.google.com/spreadsheets/d/1NTlfje4H-K3KyvBvUDqIA0z7pz_VQpijJV5NcbwX1Rs/edit?usp=sharing

当我执行此操作时，仅在提交按钮上单击 iframe 中的内容被 main index.html 替换。没有错误也没有控制台日志？我不明白？我是新来的。我的代码：

(function(){
var f = '<form action="" method="post"> Name: <input type="text" id="name" name="name">Category <select name="category" id="category"><option value="first">First</option><option value="second">Second</option><option value="third">Third</option></select><br><input type="submit"></form>';
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(f);
iframe.contentWindow.document.close();

$("#submit").click(function(){
        var name = $('#name').val();
        var category = $('#category').val();
        console.log("po ajax" , name , category);
            $.ajax({
                url: "https://docs.google.com/spreadsheets/d/1NTlfje4H-K3KyvBvUDqIA0z7pz_VQpijJV5NcbwX1Rs/edit?usp=sharing",
                data: { "name": name,"category": category},
                type: "POST",
                dataType: "xml",
                statusCode: {
                    0: function () {
                        // window.location.replace("ThankYou.html");
                        console.log("error");
                    },
                    200: function () {
                        // window.location.replace("ThankYou.html");
                        console.log("ok");
                    }
                }
            });
   });


})()

结果如下：

Answer 1

1) document.getElementsByTagName('head')[0].appendChild(my_script);})() 在

中丢失

<p><a href="javascript:(function(){my_script=document.createElement('SCRIPT');my_script.type='text/javascript';my_script.src='script.js?x=';"> Bookmarklet</a></p>

改为

 <p><a href="javascript:(function(){my_script=document.createElement('SCRIPT');my_script.type='text/javascript';my_script.src='script.js';document.getElementsByTagName('head')[0].appendChild(my_script);})();"> Bookmarklet</a></p>

它将您即时创建的 js 文件放在 head 标签中。你可以把它放在任何地方

2) form要用js创建，就是不能在js文件里放HTML。演示代码示例(script.js):

(function(){
var f = '<form action=" ">Name: <input type="text" name="name">Category <select name="category"><option value="volvo">First</option><option value="saab">Second</option><option value="fiat">Third</option></select><br><input type="submit"></form>';
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(f);
iframe.contentWindow.document.close();

})()

您可以动态放置 css 或直接在 iframe 中打开 html 文件，有很多可能性。欢迎提问

javascript 的简单任务 - 书签

Simple task with javascript - Bookmarklet

html

javascript

jquery

bookmarklet