Chrome浏览器扩展程序：在带有AJAX和JQUERY的弹出窗口中显示图片

我目前正在开发一个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会阻止在弹出窗口或类似的东西中显示图片！

来源

2013-03-14 Damien SOLDADIE

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

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

此相对路径解析为

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

在网页上，但尝试解析到

chrome-extension://pmbnmemdpheopedlikgmdeegebojkoji/chamoix.png

中的扩展名。尝试使用绝对路径或replace()将其指向正确的地址。

来源

2013-03-14 18:07:55 BeardFist

非常感谢！它现在在弹出窗口:) – 2013-03-15 10:32:22

Chrome浏览器扩展程序：在带有AJAX和JQUERY的弹出窗口中显示图片

回答

相关问题