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 示例。
在那里它说＆＃34;打开/覆盖新页面。打开一个新页面或在当前窗口上绘制一个窗口，如侧边栏＆＃34;

但是不知道如何使我的表单显示在那个例子中？请帮助，我该怎么做才能使它能够在这个Bookmarklet中调用script.js，以便下面的表单显示为侧边栏或弹出窗口？请帮忙！

编辑：

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

当我这样做时，没有任何事情在提交按钮点击集中在iframe被主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（＆＃39;头＆＃39;）[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标签内。你可以把oit放在任何地方

2）表格应该由js创建，你只是不能将HTML放在js文件中。演示代码示例（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(); })()

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

使用javascript进行简单任务 - Bookmarklet

1 个答案: