#javascript #html
Вопрос:
У меня есть HTML-страница с кнопкой «сохранить соль и связанную вкладку», которая сохранит URL-адрес текущей вкладки и соль в двух переменных, а затем добавит эти значения в таблицу на совершенно другой HTML-странице. Однако связанный файл JavaScript не может прочитать таблицу с последней HTML-страницы, к которой добавляются переменные. Есть ли какой-нибудь способ сделать это? Первый HTML:
<html>
<h1>Set the number of characters</h1>
<input id="num" type = "number" value = "20" name = "value"><br><br>
<div class="spec_symb"><label><input id = "spec_symb" name=unit type=radio value=special>Special symbols</label></div>
<div class="alphanumeric"><label><input checked id = "alpanumeric" name=unit type=radio value=alpahnumeric>Alphanumeric symbols only</label></div>
<br>
<button id="click">Generate</button><br>
<p id="text" ></p>
<button id="save">Save the salt with the associated tab opened</button>
<p id="string" ></p>
<p id="url" ></p>
<ul>
<li><a href=navigation.html>Back to the Navigation Menu</a></li>
</ul>
<script src="salt_genj.js"></script>
</html>
Код JavaScript (salt_gen.js):
function saltgen(length) {
var radio = document.getElementById("spec_symb");
var salt = "";
if(document.getElementById('spec_symb').checked == true){
var symbols = symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^amp;*()_"}
else{var symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";}
var slength = symbols.length;
for ( var i = 0; i < length; i ) {
salt = salt symbols.charAt(Math.floor(Math.random() * slength));
}
return sa<}
document.getElementById("click").onclick = function(){myFunction()};
function myFunction(){
document.getElementById("text").innerHTML = saltgen(document.getElementById("num").value);
}
document.getElementById("save").onclick = function(){anotherFunction()};
function anotherFunction(){
var salt = document.getElementById("text").innerHTML ;
var table = document.getElementById("MyTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = url;
cell2.innerHTML = sa<
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function
(tabs) {
url = tabs[0].url;
});
return sa<
}
Последняя HTML-страница с таблицей
<!DOCTYPE html>
<html lang="en">
<table id="MyTable" class="table table-striped" style="width:100%">
<tr>
<th>Webstite</th>
<th>Salt</th>
</tr>
</table>
<script src="salt_genj.js"></script>
</html>
Комментарии:
1. Можно было бы передать их в строке запроса URL-адреса или сохранить в хранилище
2. Перейти на другую HTML-страницу? У вас есть доступ к CORS?
3. @StackSlave Я не знаю, что такое CORS, но мой код предназначен для работы в качестве расширения Chrome
4. developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
5. @charlietfl Я попробовал локальное хранилище через
localStorage.setItem("vOneLocalStorage", url); localStorage.setItem("vTwoLocalStorage", salt);на своей первой странице JavaScript, затемvar urla = localStorage.getItem("vOneLocalStorage "); var salta = localStorage.getItem("vTwoLocalStorage ");, но переменные просто оказались пустыми
Ответ №1:
Вы сказали, что хотите использовать его в качестве расширения Chrome. Расширение браузера имеет background.js скрипт, он запускается всякий раз, когда запускается ваше расширение, и может подключаться между несколькими страницами.
Вы также можете использовать файлы cookie или API хранения.
Комментарии:
1. Вы имеете в виду, что я должен поместить свой код JavaScript внутрь background.js?
2. В расширениях браузера есть такая вещь, как обмен сообщениями. Вы можете отправлять сообщения между различными сценариями расширения. Причина, по которой это делается, заключается в том, что разные сценарии имеют разные разрешения. Например, в content.js сценарии могут редактировать веб-страницу, с которой она совпадает, когда background.js сценарий не может. Однако фоновый сценарий выполняется постоянно и может взаимодействовать с различными вкладками. Вы можете использовать сообщения для отправки данных из сценария содержимого в фоновый сценарий. Когда вы перейдете на другую страницу, вы можете запросить у фонового сценария ответное сообщение.
3. Как я понимаю, вы предлагаете передать переменные из salt_gen.js на задний план. js, а затем каким-то образом заполните таблицу, используя background.js. Как бы вы передали переменную из одного js-скрипта в другой?
4. В документах API Google действительно сложно ориентироваться. Я рекомендую прочитать версию Firefox. Это почти то же самое developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/…