tâche simple avec javascript - bookmarklet

est un simple formulaire qui contient un champ de texte, un champ déroulant, et un bouton Soumettre, comme ceci: J'ai créé un fichier js nommé script.js:tâche simple avec 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>

Sur mon index .html J'ai ceci:

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

sur la base de cet article how-to-make-a-bookmarklet-for-your-web-application je peux le faire parce qu'il ya InstaCalc bookmarklet exemple.
Là, il dit cette « Ouvrir/overlay une nouvelle page. Ouvrez une nouvelle page ou dessiner une fenêtre sur l'actuel, comme un sidebar` »

Mais ne pas comment faire apparaître ma forme apparaît comme dans ce Exemple? S'il vous plaît aider, que dois-je faire pour le rendre capable ainsi dans ce Bookmarklet pour appeler script.js afin que le formulaire ci-dessous soit montré comme une barre latérale ou un popup? S'il vous plaît aider!

EDIT:

Je veux enregistrer les données name et category à l'aide d'une demande de paiement ajax. Voici une feuille de calcul Google où je veux enregistrer les données https://docs.google.com/spreadsheets/d/1NTlfje4H-K3KyvBvUDqIA0z7pz_VQpijJV5NcbwX1Rs/edit?usp=sharing

quand je fais cela ne fait rien eul sur le bouton d'envoi cliquez sur concent l'intérieur iframe est remplacé par le principal index.html. Pas d'erreur et pas de journal de la console? Je ne comprends pas? Je suis nouveau à ce sujet. Mon 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"); 
        } 
       } 
      }); 
    }); 


})()

Voici le résultat:

Source

2016-05-02 Anonymous

1) document.getElementsByTagName ('tête') [0] .appendChild (my_script);})() ne manquait de

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

changement à

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

Il place votre fichier js créé à la volée dans l'en-tête. Vous pouvez placer n'importe où

2) Le formulaire doit être créé par js, vous ne pouvez pas placer HTML dans le fichier js. demo exemple de code (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(); 

})()

Vous pouvez placer le fichier html dynamiquement ou css ouvert iframe directement, beaucoup de possibilités. Les questions sont les bienvenues.

Source

2016-05-02 19:46:04

merci beaucoup pour votre réponse, cela m'a vraiment aidé. Si vous avez le temps, j'ai deux questions, d'abord, pourquoi chaque fois que je clique sur le bouton bookmarklet sur la barre des signets, un autre iframe est ajouté, puis j'ajoute une requête ajax quand je clique dessus ajax n'est pas exécuté mais quelque chose d'étrange est arrivé la page HTML est à l'intérieur d'ajax. s'il vous plaît vérifier mon édition –

Bon à savoir, cela aide. Je vous donne juste l'exemple de démonstration. Vous ne pouvez pas lier l'événement à l'élément qui est en iframe de la page en cours. –

Comment puis-je faire cela/:( –

tâche simple avec javascript - bookmarklet

Répondre

Questions connexes