在Chrome擴展中提交表單不起作用

我正在構建一個擴展名爲chrome的擴展表單，該表單在提交時執行onsubmit="submit(); return false;"。在Chrome擴展中提交表單不起作用

我知道方法提交作品，因爲我在onclick="submit()"的表單之外創建了一個按鈕，並且完美地工作。

下面的形式：

<form method="post" name="gaffeForm" onsubmit="submit(this); return false;"> 
    <div> 
     <div class="submitField"> 
      <p class="formp">Title :</p> 
      <input type="text" name="title" size="50" id="pageTitle" placeholder="Title" required /> 
     </div> 
     <div class="submitField"> 
      <p class="formp">URL :</p> 
      <input type="url" name="url" size="50" id="pageURL" placeholder="URL" required /> 
     </div> 
     <div class="submitField"> 
      <p class="formp">Error :</p> 
      <textarea name="gaffe" rows="5" cols="50" id="pageGaffe" placeholder="Gaffe" required ></textarea> 
     </div> 
     <div class="submitField"> 
      <p class="formp">Comment :</p> 
      <textarea name="comment" rows="5" cols="50" id="gaffeComment" placeholder="Your comment on the gaffe" required ></textarea> 
     </div> 
     <div class="submitField"> 
      <p class="formp">Tags :</p> 
      <input type="text" name="tags" size="50" id="gaffeTags" placeholder="Separate the tags with a comma" required /> 
     </div> 
     <div id="GaffeSubmit"> 
      <input type="submit" value="Submit" /> 
     </div> 
    </div> 
</form>

這裏是submit()功能：

function submit(f) { 
    var xhr = new XMLHttpRequest(); 

    var title = $('#pageTitle').val().replace(/\//g, "%2F"); 
    var url = $('#pageURL').val().replace(/http:\/\//, "").replace(/https:\/\//, "").replace(/\//g, "%2F"); 
    var gaffe = $('#pageGaffe').val().replace(/\//g, "%2F"); 
    var comment = $('#gaffeComment').val().replace(/\//g, "%2F"); 
    var tags = $('#gaffeTags').val().replace(/\//g, "%2F"); 

    xhr.open("POST", "http://localhost:3000/F0ETF87dar8F7deO92K/" + title + "/" + url + "/" + gaffe + "/" + comment + "/" + tags, true); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4) { 
      if (req.status == 200) window.close(); 
     } 
    }; 
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhr.setRequestHeader("Connection", "close"); 
    xhr.send(); 
    return false; 
}

所以，當我點擊我的所有領域填補了會發生什麼提交的是，場發表評論，標籤變成空白，就是這樣......我嘗試了很多不同的方式來執行submit()，但沒有一個能夠奏效......謝謝。

來源

2011-08-29 Alberto Elias

頁面是從擴展中加載還是從網站加載，並且您試圖在名爲？的擴展內容腳本中使用submit()函數？

如果submit函數位於內容腳本中，則不能從網站調用該函數，因爲Chrome擴展安全系統不允許在內容腳本中的頁面內容和JavaScript之間調用JavaScript。

來源

2011-08-29 18:37:57 Femi

表單在popup.html中，提交也是popup.html中的一個函數。 –

啊。您是否在popup.html中顯式加載內容腳本？我不確定內容腳本是否全部自動可用於您的html文件，或者您是否必須明確加載它們，並且您的源文件片段未顯示加載任何顯式腳本文件。如果你將'submit'函數複製到popup.html中，那麼它會起作用嗎？ – Femi

我的內容腳本與此無關。我的提交函數是popup.html –

跨域策略禁止向不同端口發送請求。如果你打開錯誤控制檯，你可能會看到一個安全錯誤。

您可以在清單中設置域權限，但不能設置端口。

來源

2011-08-29 18:57:53 serg

我不明白你的意思是什麼端口... XMLHttpRequest工作正常，因爲功能提交工作完美時，由窗體外的按鈕執行，但它不會執行時，我按提交。我已經嘗試刪除該函數中的所有內容，只是發出警報，但仍然不會執行 –

@Alberto Elias：我的意思是您正在嘗試提交端口3000.除非您目前正在端口3000上查看此頁面，不會允許你將XMLHttpRequest從80. – serg

變成3000，它確實可行！它在端口3000，因爲我的服務器現在在本地主機，所以網絡在該端口。但我知道該方法的工作原理是因爲我通過按下與提交不同的按鈕之外的其他按鈕來執行該方法。 –

在Chrome擴展中提交表單不起作用

回答

相關問題