einfache Aufgabe mit Javascript - Bookmarklet

Hier ist ein einfaches Formular, das ein Textfeld enthält, ein Dropdown-Feld und ein Submit-Button, wie folgt aus: ich eine js Datei script.js namens erstellt:einfache Aufgabe mit Javascript - Bookmarklet

<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>

Auf meinem Index .html ich habe dies:

<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>

Basierend auf diesem Artikel how-to-make-a-bookmarklet-for-your-web-application ich tun kann, dass, weil es InstaCalc Bookmarklet Beispiel.
Dort heißt es diesem „Open/Overlay eine neue Seite. Eine neue Seite öffnen oder ein Fenster auf dem aktuellen ziehen, wie ein sidebar`“

Aber nicht, wie meine Form erscheint wie, dass erscheinen Beispiel? Bitte helfe, was ich tun soll um es so in diesem Bookmarklet zu erreichen script.js so das Formular unten wie eine Sidebar oder ein Popup anzuzeigen? Bitte helfen Sie!

EDIT:

Ich mag diese Daten name und category mit einer Ajax-Anforderung speichern. Hier ist eine Google-Tabelle, wo ich die Daten https://docs.google.com/spreadsheets/d/1NTlfje4H-K3KyvBvUDqIA0z7pz_VQpijJV5NcbwX1Rs/edit?usp=sharing

speichern möchten, wenn ich dies nichts zu tun nly auf geschieht Submit-Button klicken concent innerhalb iframe wird durch Haupt index.html ersetzt. Kein Fehler und kein Konsolenprotokoll? Ich verstehe es nicht? Ich bin neu in diesem Bereich. Mein Code:

(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"); 
        } 
       } 
      }); 
    }); 


})()

Hier ist das Ergebnis:

Quelle

2016-05-02 Anonymous

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

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

Änderung es

<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>

Es platzieren Sie Ihre on-Fly erstellt js-Datei im Kopf-Tag. Sie können oit überall

2) Form sollte von js erstellt werden, können Sie einfach nicht HTML in Js-Datei platzieren. Demo Codebeispiel (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(); 

})()

können Sie CSS setzen dynamisch oder öffnen HTML-Datei in iframe direkt, viele Möglichkeiten. Frage ist willkommen.

Quelle

2016-05-02 19:46:04

Vielen Dank für Ihre Antwort, es hat mir wirklich geholfen. Wenn Sie Zeit haben, habe ich zwei Fragen, erstens, warum jedes Mal, wenn ich auf die Bookmarklet-Schaltfläche in der Lesezeichenleiste klicke, ein weiterer iFrame hinzugefügt wird, zweitens habe ich eine Ajax-Post-Anfrage hinzugefügt, wenn ich darauf klicke, ajax wird nicht ausgeführt, aber etwas Seltsames ist passiert Die HTML-Seite befindet sich in Ajax. Bitte überprüfen Sie meine Bearbeitung –

Gut zu wissen, es hilft. Ich gebe Ihnen nur das Demo-Beispiel. Sie können kein Ereignis an ein Element binden, das sich in der aktuellen Seite in iframe befindet. –

Wie kann ich das tun/:( –

einfache Aufgabe mit Javascript - Bookmarklet

Antwort

Verwandte Themen