Chrome的扩展:在AJAX和jQuery的弹出显示图片

我目前正在开发一个Chrome扩展,它允许在用户发送一个词来显示图片。 我使用AJAX和jQuery来得到的图片。

我有一个问题, 显示弹出式内的图片 。 事实上,它的工作原理普通的HTML页面上,但不是在弹出。

如果你想测试:http://algec.iut-blagnac.fr/~groupe6pjt/testAjax/pageHTML.html。

当我尝试显示在弹出的画面,我在JavaScript控制台此错误:

无法加载资源铬扩展://pmbnmemdpheopedlikgmdeegebojkoji/chamoix.png

然后我把它的裂缝,而不是图片上的略微图像图标。

我不认为这是画面的原因,而是我们的页面(以上链接)关于工作道路上的一个问题。

这里是我的代码:

1. more_com.php(服务器上的PHP文件)

<?php print "<p>Je suis un fichier php 2.0 !</p>"; $conn = mysql_connect("localhost", "groupe6pjt", "bfjrs2012") or die ("Connexion impossible"); $base="groupe6pjt"; mysql_select_db("$base") or die ("base inconnue"); $requete2 = "select imgSigne from signe where idSigne=10;"; $resultat2 = mysql_query($requete2) or die ("requete2 impossible"); while($tab = mysql_fetch_array($resultat2)) { echo $tab[0]; echo "<br/><img src=\"chamoix.png\" />"; } ?>

2. popup.html

<!DOCTYPE html PUBLIC> <html> <head> <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"> <title>Techniques AJAX - XMLHttpRequest</title> <script src="popup.js"></script> </head> <body> <div id="bandeau"> <h4 style="color : white;">AIPS - Traduction LSF</h4> </div> <div id="obtenirTexte" class="well well-large"> <p><b>1)</b> Obtenir le texte surligné sur la page : </p> <form class="form-search"> <div class="input-append"> <input class="span2 search-query" name="text" style="height : 30px; width : 175px;" type="text" id="text"/><button id="effacer" class="btn btn-primary" name="effacer" style="height : 30px;" title="Effacer le mot"><img src="effacer.png" alt="Erreur"/></button> </div><br/><br/> <button id="submit" class="btn" title="1) Texte">Obtenir le texte</button> </form> </div> <div id="obtenirImage" class="well well-large"> <div id="commentaires"> <p><b>2)</b> Obtenir l'image correspondante : </p> </div> <form> <input id="more_com" class="btn" type="button" value="Obtenir l'image" title="2) Image"/> </form> <div id="message"> <!-- PHP return here ! --> </div> </div> <!-- As you can see with Chrome you can't put script directly in the htlm code so I create a file with my function : fonction.js --> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script language="JavaScript" type="text/javascript" src="fonction.js"></script> <script language="JavaScript" type="text/javascript" src="fonction2.js"></script> <script language="JavaScript" type="text/javascript" src="popup.js"></script> </body> </html>

3. fonction.js

$(document).ready(function(){ $("#more_com").click(function(){ //Cette fonction se déclenche quand on clique sur le bouton d'id "more_com" (ici "Obtenir l'image") var variableTest=$.ajax({ url : "http://algec.iut-blagnac.fr/~groupe6pjt/testAjax/more_com.php", //Ca c'est la page PHP qu'on va devoir modifier pour qu'à la reception du mot elle affiche l'image correspondante (Ne pas changer !) type : "GET", //On garde GET car on veut récupérer une donnée en envoyant des infos ( != POST ) //data : 'motRecher=' + COUCOU; // *****A MODIFIER***** //On va devoir utiliser ce champ pour envoyer le mot surligné vers la page PHP "more_com.php" dataType : "html", //Le type de données renvoyé par la page PHP (ici : c'est du html que la page renvoie) }); variableTest.done(function(data, textStatus, jqXHR){ //Si on atteind le fichier alors on affiche ce que retourne "more_com.php" (ici il retourne "Je suis un fichier PHP !") $("#message").html(data); //Permet l'affichage du fichier PHP }); variableTest.fail(function(jqXHR, textStatus){ //Si on atteind pas le fichier ... $("#message").html("<p>Erreur</p>"); //...erreur }); }); });

我认为Chrome的防止画面的显示在弹出的或类似的东西!

--------------解决方案-------------

您遇到的问题是,图像被定义为这样的

<img src="./chamoix.png">

这种相对路径解析

http://algec.iut-blagnac.fr/~groupe6pjt/testAjax/chamoix.png

在网页上,但试图解析

chrome-extension://pmbnmemdpheopedlikgmdeegebojkoji/chamoix.png

在扩展。 尝试使用绝对路径或replace()把它指向正确的地址。

分类:php 时间:2012-04-19 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.454 (s). 9 q(s)