[英]Unable to access script.js from html file
我有 profile.html 和 script.js 文件,我在应该调用 script.py 的服务器中运行 profile.html,理想的工作应该像这个例子:
https://mido22.github.io/MediaRecorder-sample/.
但是,在我的情况下,当我单击“请求流”按钮时,页面会重新加载并且没有任何反应。 profile.html 和 script.js 都在同一个目录下
个人资料.html
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<style>
button{
margin: 10px 5px;
}
li{
margin: 10px;
}
body{
width: 90%;
max-width: 960px;
margin: 0px auto;
}
#btns{
display: none;
}
h1{
margin: 100px;
}
</style>
<div class="content-section">
<div class="media">
<img class="rounded-circle account-img" src="{{ user.profiles.image.url }}">
<div class="media-body">
<!-- the user here is built-in in django that represents current logged in user -->
<h2 class="account-heading">{{ user.username }}</h2>
<p class="text-secondary">{{ user.email }}</p>
</div>
</div>
<!-- (enctype) : pass image data for our profile picture properly -->
<form method="POST", enctype="multipart/form-data">
<!-- Adds some security checks -->
{% csrf_token %}
<h1> MediaRecorder API example</h1>
<p> For now it is supported only in Firefox(v25+) and Chrome(v47+)</p>
<div id='gUMArea'>
<div>
Record:
<input type="radio" name="media" value="video" checked id='mediaVideo'>Video
<input type="radio" name="media" value="audio">audio
</div>
<button class="btn btn-default" id='gUMbtn'>Request Stream</button>
</div>
<div id='btns'>
<button class="btn btn-default" id='start'>Start</button>
<button class="btn btn-default" id='stop'>Stop</button>
</div>
<div>
<ul class="list-unstyled" id='ul'></ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src="script.js"></script>
</form>
</div>
{% endblock content %}
脚本.js
'use strict'
let log = console.log.bind(console),
id = val => document.getElementById(val),
ul = id('ul'),
gUMbtn = id('gUMbtn'),
start = id('start'),
stop = id('stop'),
stream,
recorder,
counter=1,
chunks,
media;
gUMbtn.onclick = e => {
let mv = id('mediaVideo'),
mediaOptions = {
video: {
tag: 'video',
type: 'video/webm',
ext: '.mp4',
gUM: {video: true, audio: true}
},
audio: {
tag: 'audio',
type: 'audio/ogg',
ext: '.ogg',
gUM: {audio: true}
}
};
media = mv.checked ? mediaOptions.video : mediaOptions.audio;
navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
stream = _stream;
id('gUMArea').style.display = 'none';
id('btns').style.display = 'inherit';
start.removeAttribute('disabled');
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => {
chunks.push(e.data);
if(recorder.state == 'inactive') makeLink();
};
log('got media successfully');
}).catch(log);
}
start.onclick = e => {
start.disabled = true;
stop.removeAttribute('disabled');
chunks=[];
recorder.start();
}
stop.onclick = e => {
stop.disabled = true;
recorder.stop();
start.removeAttribute('disabled');
}
function makeLink(){
let blob = new Blob(chunks, {type: media.type })
, url = URL.createObjectURL(blob)
, li = document.createElement('li')
, mt = document.createElement(media.tag)
, hf = document.createElement('a')
;
mt.controls = true;
mt.src = url;
hf.href = url;
hf.download = `${counter++}${media.ext}`;
hf.innerHTML = `donwload ${hf.download}`;
li.appendChild(mt);
li.appendChild(hf);
ul.appendChild(li);
}
我得到的错误:
[01/Mar/2020 15:27:36] "POST /profile/ HTTP/1.1" 200 5274
Not Found: /profile/script.js
[01/Mar/2020 15:27:36] "GET /profile/script.js HTTP/1.1" 404 3896
我们不能直接从 django 文件夹中提供文件或其他东西,因为如果我们想提供文件或我们可以在开发过程中使用静态的东西,django 会出于安全目的阻止它。 或者,您可以将 javascript 代码写入/移动到您的 html 模板,而无需像这样导入:
<script>
your javascript code
</script>
但是如果我们使用大量的 javascript 代码,它就会变得无效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.