javascript - 请求帮助将内联 JS 脚本转换为外部文件?
问题描述
在用户enhzflep的帮助下,我现在有了一个可以执行以下操作的工作脚本:
- 从此Google Sheets API 回调中提取数据
- 将数据转换为 HTML 表格。
- 查询第 1 列中的数据,并从第 2 列的同一行返回结果。
代码是:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var spData = null;
function doData(json) {
spData = json.feed.entry;
}
function drawCell(tr, val) {
var td = $("<td/>");
tr.append(td);
td.append(val);
return td;
}
function drawRow(table, rowData) {
if (rowData == null) return null;
if (rowData.length == 0) return null;
var tr = $("<tr/>");
table.append(tr);
for(var c=0; c<rowData.length; c++) {
drawCell(tr, rowData[c]);
}
return tr;
}
function drawTable(parent) {
var table = $("<table/>");
parent.append(table);
return table;
}
function readData(parent) {
var data = spData;
var table = drawTable(parent);
var rowData = [];
for(var r=0; r<data.length; r++) {
var cell = data[r]["gs$cell"];
var val = cell["$t"];
if (cell.col == 1) {
drawRow(table, rowData);
rowData = [];
}
rowData.push(val);
}
drawRow(table, rowData);
}
$(document).ready(function(){
readData($("#data"));
searchTable( 'dragon', document.querySelector('table') );
});
function searchTable(searchStr, target)
{
let rows = Array.from( target.querySelectorAll('tr') );
rows.forEach( (row,idx,col) => {
let firstCell = row.querySelector('td').textContent;
if (firstCell == searchStr)
{
let cell2 = row.querySelectorAll('td')[1].textContent;
console.log(`${searchStr} found in row ${idx}`);
console.log(`col 2 of row #${idx} is: ${cell2}`);
}
}
);
}
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1P9DhWOHcl14Y7-P5wCxTm-sUceckGquPoOobO75XhvM/1/public/values?alt=json-in-script&callback=doData"></script>
<style type="text/css" media="print">
form {display: none;}
</style>
</head>
<body>
<div id="data"/>
</body>
</html>
该代码在作为网页运行时完美运行。
在这种情况下,我想将页面嵌入到 Chrome 扩展程序中,以便在 Chrome 扩展程序上显示图表。我遇到的问题是脚本作为内联脚本运行,根据 Chrome CSP,这是不允许的。如果我尝试它,可以理解的是,控制台会记录以下错误:
callback.html:1
Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
callback.html:4
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256'), or a nonce ('nonce-...') is required to enable inline execution.
callback.html:1
Refused to load the script 'https://spreadsheets.google.com/feeds/cells/1P9DhWOHcl14Y7-P5wCxTm-sUceckGquPoOobO75XhvM/1/public/values?alt=json-in-script&callback=doData' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
我想知道是否有任何方法可以替代 Google Sheet pull 的外部文件。我知道可以通过jquery.min.js
在我的 Chrome 扩展包中包含文件的本地版本来解决 ajax 脚本问题,但我不确定是否可以对其他内联脚本执行相同的操作。
任何援助将不胜感激!
解决方案
为此,我将调用您的 HTML 文件 index.html 并将脚本移动到的文件称为 myScript.js,它位于同一目录中。
索引.html
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./myScript.js"></script>
<script src="https://spreadsheets.google.com/feeds/cells/1P9DhWOHcl14Y7-P5wCxTm-sUceckGquPoOobO75XhvM/1/public/values?alt=json-in-script&callback=doData"></script>
<style type="text/css" media="print">
form {
display: none;
}
</style>
</head>
<body>
<div id="data" />
</body>
</html>
myScript.js
var spData = null;
function doData(json) {
spData = json.feed.entry;
}
function drawCell(tr, val) {
var td = $("<td/>");
tr.append(td);
td.append(val);
return td;
}
function drawRow(table, rowData) {
if (rowData == null) return null;
if (rowData.length == 0) return null;
var tr = $("<tr/>");
table.append(tr);
for (var c = 0; c < rowData.length; c++) {
drawCell(tr, rowData[c]);
}
return tr;
}
function drawTable(parent) {
var table = $("<table/>");
parent.append(table);
return table;
}
function readData(parent) {
var data = spData;
var table = drawTable(parent);
var rowData = [];
for (var r = 0; r < data.length; r++) {
var cell = data[r]["gs$cell"];
var val = cell["$t"];
if (cell.col == 1) {
drawRow(table, rowData);
rowData = [];
}
rowData.push(val);
}
drawRow(table, rowData);
}
$(document).ready(function () {
readData($("#data"));
searchTable('dragon', document.querySelector('table'));
});
function searchTable(searchStr, target) {
let rows = Array.from(target.querySelectorAll('tr'));
rows.forEach((row, idx, col) => {
let firstCell = row.querySelector('td').textContent;
if (firstCell == searchStr) {
let cell2 = row.querySelectorAll('td')[1].textContent;
console.log(`${searchStr} found in row ${idx}`);
console.log(`col 2 of row #${idx} is: ${cell2}`);
}
});
}
推荐阅读
- sql - 我创建了一个过程并在此之后键入,我只是修改了过程光标中的一列并键入
- c - what does enum DescriptorType DescriptorType :8; mean in C code?
- c++ - PCL 安装教程
- ios - 无法访问 Swift 文件中的 Bundle
- python - 无法使用 pip 安装聊天机器人
- javascript - 为什么即使我已经发送了响应,我的“then”承诺链接仍然执行?
- pyspark - 如何在更短的时间内向初始 DataFrame 添加大量列(5000~1000 列)?
- spring - Webflux WebClient中如何自定义异常?
- python - 我如何遍历列表的元素以对多个邮政编码进行 API 调用?
- javascript - 如何使用 chutzpah 覆盖 Jquery 中的 Js 代码