分类目录归档:Javascript

Bootstrap 5常见错误我该如何解决?

我正在通过 Flask 开发一个 Web 应用程序。 我也使用 Bootstrap 5。在那里添加 JS 后,所有按钮都完全停止运行。 这是 JS 控制台中的这样一个错误:

没有JS,下拉内容对我不起作用,所以我真的需要这个错误消失。 谢谢!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/fontello.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style1.css') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=League+Gothic&display=swap" rel="stylesheet">
    {% block title %}
    <title>Document</title>
    {% endblock %}
</head>
<body>
  {% block upnav %}
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <span class="text-white fs-4 navbar-brand" style="font-family: 'League Gothic', sans-serif;">Your watchlist</span>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            {% if not current_user.is_authenticated %}
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
              <li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}" data-bs-toggle="modal" data-bs-target="#exampleModal">Login</a></li>
              <li class="nav-item"><a class="nav-link" href="{{ url_for('reg') }}" data-bs-toggle="modal" data-bs-target="#MyModal">Sign up</a></li>
            </ul>
            {% else %}
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link" href="#recently-watched">Недавно просмотренные</a></li>
                <li class="nav-item"><a class="nav-link" href="#popular">Популярные</a></li>
                <li class="nav-item"><a class="nav-link" href="#fav">Любимые</a></li>
            </ul>

谈谈浏览器 iframe 跨域 的沙盒模式

众所周知,现代的浏览器通过iframe调用不同域下的页面,会触发沙盒模式,比如: a.com/a.html iframe内框 b.com/b.html,b.com/b.html 的内页无法通过js操作 a.com/a.html。这样做可以 防止跨域攻击,使网络访问更安全。如果更复杂的模式,比如 a.com/a.html iframe内框 b.com/b.html,b.com/b.html iframe内框 a.com/c.html,这时 a.com/c.html 可以访问 a.com/a.html吗?估计这个大部分人就都不知道了,做一个简单的实验:
1、http://www.dezaoju.com/sanbox/ 内嵌 http://www.shuodahua.com/sanbox/
2、http://www.shuodahua.com/sanbox/ 内嵌 http://www.dezaoju.com/sanbox/frame.html
经过测试,无论内嵌多少层,只要是同域的 页面,测试 IE、Chrome、Firefox 都不会触发 sanbox
继续阅读