django html模板中的Javascript代码打印
提问于 2020-05-26 09:29:46
我在django有一个简单的博客网站，如果在Post中给出了一个视频URL，它包含了播放来自Twitch的嵌入式视频的代码。模型函数似乎正在工作，但我在html模板本身中遇到了问题。javascript代码直接打印到博客文章中，而不是运行脚本嵌入视频：
下面是html模板中的代码片段：
<div class="fsize-16 lheight-26 mt15" data-trim="140">
{% if post.video_URL %}
<script src= "http://player.twitch.tv/js/embed/v1.js"></script>
<div id='youtubeplayer'></div>
<script type="text/javascript">
var options = {
width: 800,
height: 500,
video: "{{ post.get_video_id }}"
};
var player = new Twitch.Player("youtubeplayer", options);
player.setVolume(0.5);
</script>
{% endif %}
</div>任何想法都将不胜感激。
编辑4:整个呈现输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test.tv - a gaming community</title>
<!-- Favicon -->
<link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="/static/fonts/css/font-awesome.min.css" />
<!-- Bootstrap-->
<link rel="stylesheet" href="/static/css/bootstrap.min.css" />
<!-- Style -->
<link rel="stylesheet" href="/static/css/style.css" />
<!-- Responsive Style -->
<link rel="stylesheet" href="/static/css/responsive.css" />
<!-- Animate CSS -->
<link rel="stylesheet" href="/static/plugins/animate.css-master/animate.min.css">
<!-- Light Box -->
<link href="/static/plugins/lightbox2-master/dist/css/lightbox.css" rel="stylesheet">
<!-- Video js -->
<link href="/static/css/video-js.css" rel="stylesheet">
<!-- Datapicker -->
<link href="/static/plugins/jquery-date-range-picker-master/dist/daterangepicker.min.css" rel="stylesheet">
<!-- Sliders -->
<link rel="stylesheet" type="text/css" href="/static/plugins/slick-1.8.0/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="/static/plugins/slick-1.8.0/slick/slick-theme.css" />
<!-- Tags-->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap-tagsinput.css" />
</head>
<body>
<!-- PRELOADER START -->
<!-- <div class="loader-wrapper">
<div class='cssload-loader'>
<div class='cssload-inner cssload-one'></div>
<div class='cssload-inner cssload-two'></div>
<div class='cssload-inner cssload-three'></div>
</div>
</div> -->
<!-- PRELOADER END -->
<!-- HEADER START -->
<div class="header-line-wrapper">
<header class="header-wrapper fixed-top plr100">
<div class="table height-100p">
<div class="table-row">
<div class="table-cell valign-middle text-left">
<a href="/" class="logo">
<img src="/static/images/logo.png" alt="" class="img-responsive inline-block">
</a>
</div>
<div class="table-cell valign-top text-center vm-sm">
<div class="main-menu">
<span class="toggle_menu">
<span></span>
</span>
<ul class="menu clearfix">
<li class="inline-block menu-item-has-children">
<a href="/">
Content
</a>
</li>
<li class="inline-block menu-item-has-children">
<a href="#">
Creators
</a>
</li>
<li class="inline-block menu-item-has-children">
<a href="#">
test
</a>
</li>
<li>
<a href="/create/">
CREATE
</a>
</li>
</ul>
</div>
</div>
<div class="table-cell valign-top text-right">
<div class="right-bl">
<div class="search-wrapper inline-block valign-middle">
<i class="fa fa-search color-white fsize-28" aria-hidden="true"></i>
<form class="search-content" action="#">
</form>
</div>
<a href="/profile/test" class="btn header-btn ml25 color-white hidden-sm hidden-xs">
test
</a>
</div>
</div>
</div>
</div>
</header>
</div>
<!-- HEADER END -->
<!-- BLOCK CONTENT -->
<!-- SECTION START -->
<section class="blog-content ptb150 each-element">
<br \>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-md-push-2">
<article class="vertical-item format-thumb fsize-0 clearfix">
<div class="post-content col-lg-12 col-md-12 col-sm-12 col-xs-12 equal-height">
<div class="post-wrapper">
<div class="table">
<div class="table-row">
<div class="table-cell valign-top">
<div class="platform fsize-14 fweight-700 uppercase">
<a href="/tagged/test">#test</a>
</div>
</div>
<div class="table-cell valign-top text-right">
<div class="fsize-14 fweight-700 uppercase">
May 26, 2020, 1:47 a.m.
</div>
</div>
</div>
</div>
<div class="mt15">
<a href="post.html" class="post-title">
<h3><a href="/post/the-literal-god">test video</a></h3>
</a>
<div class="fsize-16 lheight-26 mt15" data-trim="140">
<script src="http://player.twitch.tv/js/embed/v1.js"></script>
<div id='youtubeplayer'></div>
<script type="text/javascript">
var options = {
width: 800,
height: 500,
video: "630638363"
};
var player = new Twitch.Player("youtubeplayer", options);
player.setVolume(0.5);
</script>
</div>
</div>
</div>
<div class="post-bottom table">
<div class="table-cell valign-middle">
<i class="fa fa-user color-1 fsize-14" aria-hidden="true"></i>
<span class="color-2 fsize-14 ml5"><a href="/profile/test">test</a></span>
</div>
<div class="table-cell valign-middle text-right">
<i class="fa fa-comment color-1 fsize-14" aria-hidden="true"></i>
<span class="color-2 fsize-14 ml5">0</span>
</div>
</div>
</div>
</article>
<article class="vertical-item format-thumb fsize-0 clearfix">
<div class="item-left-img col-lg-4 col-md-4 col-sm-12 col-xs-12 equal-height">
<img src="/static/images/score/7.png">
</div>
<div class="post-content col-lg-8 col-md-8 col-sm-12 col-xs-12 equal-height">
<div class="post-wrapper">
<div class="table">
<div class="table-row">
<div class="table-cell valign-top">
<div class="platform fsize-14 fweight-700 uppercase">
<a href="/tagged/test">#test</a>
</div>
</div>
<div class="table-cell valign-top text-right">
<div class="fsize-14 fweight-700 uppercase">
May 22, 2020, 2:16 a.m.
</div>
</div>
</div>
</div>
<div class="mt15">
<a href="post.html" class="post-title">
<h3><a href="/post/test">test</a></h3>
</a>
<div class="fsize-16 lheight-26 mt15" data-trim="140">
</div>
</div>
</div>
<div class="post-bottom table">
<div class="table-cell valign-middle">
<i class="fa fa-user color-1 fsize-14" aria-hidden="true"></i>
<span class="color-2 fsize-14 ml5"><a href="/profile/test">test</a></span>
</div>
<div class="table-cell valign-middle text-right">
<i class="fa fa-comment color-1 fsize-14" aria-hidden="true"></i>
<span class="color-2 fsize-14 ml5">0</span>
</div>
</div>
</div>
</article>
<div class="col-lg-12 text-center mt60">
<div class="pagination-page">
<a href="#" class="page-numbers prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</a>
<span class="page-numbers active">
1
</span>
<a href="#" class="page-numbers">
2
</a>
<span class="page-numbers dots">
...
</span>
<a href="#" class="page-numbers">
12
</a>
<a href="#" class="page-numbers next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION END -->
<!-- FOOTER START -->
<footer class="footer">
<div class="container">
<div class="row mb110">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<a href="index.html">
<img src="{% static 'images/logo.png" alt="">
</a>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 text-right">
<ul class="footer-menu">
<li>
<a href="index.html">
Homepage
</a>
</li>
<li>
<a href="#">
Pages
</a>
</li>
<li>
<a href="gallery-masonry.html">
Gallery
</a>
</li>
<li>
<a href="games.html">
Games
</a>
</li>
<li>
<a href="blog-right.html">
Blog
</a>
</li>
<li>
<a href="contacts.html">
Contacts
</a>
</li>
</ul>
<div class="mt60">
Andouille landjaeger flank boudin. Jerky cupim alcatra sirloin porchetta,
<br /> turkey short ribs leberkas doner bacon pancetta buffalo.
</div>
<div class="social-content mt30">
<div class="social-list">
<a href="#">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</div>
<div class="social-list">
<a href="#">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</div>
<div class="social-list">
<a href="#">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</div>
<div class="social-list">
<a href="#">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="copyright ptb30 col-lg-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
© Copyright 2018
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-right">
All Rights Reserved
</div>
</div>
</div>
</div>
</footer>
<!-- FOOTER END -->
<!-- Scripts -->
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/plugins/slick-1.8.0/slick/slick.min.js"></script>
<script src="/static/plugins/flex-menu/flexmenu.min.js"></script>
<script src="/static/plugins/jquery-match-height-master/dist/jquery.matchHeight.js"></script>
<script src="/static/plugins/muuri-master/muuri.js"></script>
<script src="/static/plugins/vide-0.5.1/dist/jquery.vide.min.js"></script>
<script src="/static/plugins/paroller.js-master/dist/jquery.paroller.min.js"></script>
<script src="/static/js/video.js"></script>
<script src="/static/js/jquery.inview.min.js"></script>
<script src="/static/js/progressbar.min.js"></script>
<script src="/static/plugins/lightbox2-master/dist/js/lightbox.js"></script>
<script src="/static/js/moment.min.js"></script>
<script src="/static/plugins/jquery-date-range-picker-master/dist/jquery.daterangepicker.min.js"></script>
<script src="/static/plugins/test-master/dist/test.min.js"></script>
<script src="/static/js/script.js"></script>
<!-- Tag scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>-->
<script src="/static/js/bootstrap-tagsinput.js"></script>
<script>
$("#post-form").submit(function(e){
e.preventDefault();
});
</script>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-26 10:11:37
它是你最底层的base.html
<script src="{% static 'js/bootstrap-tagsinput.js' %}"></script>
$("#post-form").submit(function(e){
e.preventDefault();
});
</script>您不是打开脚本
<script src="{% static 'js/bootstrap-tagsinput.js' %}"></script>
<script>
$("#post-form").submit(function(e){
e.preventDefault();
});
</script>Stack Overflow用户
发布于 2020-05-26 09:53:21
使用HTTPS
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62028019
复制相关文章
腾讯云开发者
