GitHubが提供するAPIを使用してすべてのコンテキストを取得し、同様のメソッドを使用しevalて強制的に書き込むことができます。
公式製品でこの方法を使用することはお勧めしませんが、テストとして、またはいくつかの練習用スクリプトを作成すると、コードの重複を大幅に節約できます。
ドキュメントGitHubAPIはコンテンツを取得します
スクリプトと例
ファイルを入力にドラッグできるコンポーネントを作成します。
https://api.github.com/repos/ CarsonSlovoka / excel /contents/ app / urls / static / js / pkg / input / ask-file.js？ref = d625296
以下に、コンテンツをロードして、使用できるように埋め込む方法を示します。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<!-- Above CSS are not must be given, I want it more pretty, that all. -->
<input data-com="ask-file" placeholder="select or drag the file to attach" multiple>
<script type="module">
function GithubExplorer() {
/**
* @param {string} owner Username
* @param {string} repo repository name
* @param {string} path filepath
* @param {string} branch branch name or SHA1
* @param {string} token The token is used for project private. generate new token https://github.com/settings/tokens
* */
this.Query = async (owner, repo, path, {branch = "master", token = undefined}) => {
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options
const url = `https://api.github.com/repos/${owner}/${repo}/contents/${path}?ref=${branch}`
const headers = {
accept: "application/vnd.github.v3.raw",
}
if (token) {
headers["authorization"] = `token ${token}`
}
const response = await fetch(url, {
method: 'GET',
headers,
})
if (!response.ok) {
const errMsg = await response.text()
throw Error(`${response.statusText} (${response.status}) | ${errMsg} `)
}
return await response.blob()
}
}
(async () => {
const github = new GithubExplorer()
const blobAskFileScript = await github.Query("CarsonSlovoka", "excel", "app/urls/static/js/pkg/input/ask-file.js", {branch: "d625296"})
let askFileScriptText = await blobAskFileScript.text()
askFileScriptText = askFileScriptText.replaceAll("export class AskInputFile", "class AskInputFile")
document.querySelector(`head`).append(
document.createRange().createContextualFragment(`
<script>${askFileScriptText}<\/script>`)
)
AskInputFile.BuildAll() // This function is from the script.
})()
</script>
以下は、コンテンツを読み込んだ後に実行する方法を知っている簡単なスクリプトです。
const body = document.querySelector(`body`)
const range = document.createRange()
const content = `<script>console.log("hello world")<\/script>`
const frag = range.createContextualFragment(content)
body.append(frag)
