Javascript 和 CSS 导致文本框消失，我希望它保留-6ren

Javascript 和 CSS 导致文本框消失，我希望它保留

转载作者：太空宇宙更新时间：2023-11-04 14:36:07

所以这要么是 CSS 问题，要么是 Javascript，但我需要你的专业知识。

我建了一个网站，上面有 youtube API。

YouTube API 要求您授权自己开始拉取。

授权前看起来像这样:http://d.pr/i/96sB

授权后，框消失:http://d.pr/i/4SVx

这是关联的 javascript:

// gapi.auth.authorize() call.
function handleAuthResult(authResult) {
  if (authResult) {
    $('.pre-auth').hide();
    loadAPIClientInterfaces();
  } else {
    $('#login-link').click(function() {
      gapi.auth.authorize({
        client_id: OAUTH2_CLIENT_ID,
        scope: OAUTH2_SCOPES,
        immediate: false
        }, handleAuthResult);
    });
  }
}

HTML

  <div id="login-container" class="pre-auth back_image">Please click <a href="#" id="login-link">this link</a> to load the playlist.  It will pull authorization for the API from your Google account
    <img src="Pictures/AuthButtons.jpg" width="1060" height="20">
  </div>

CSS

.wrap{
    width: 1060px;
    margin: auto;
    }
.back_image{
    width: 1060px;
    height:auto;
    margin: auto;
    text-align:center;
    position:relative;
    }   
.text_over_image{
    position: absolute;
    margin: auto;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    color:#fff;
    height:40px;
    background-color: rgba(0, 0, 0, .3);
    width: 1060px;
    color: white;
    }
iframe{
    margin: auto;
    }

.background_color{
    background-color: #F8F8F8;
    }   
h1{
    }

.paging-button {
    visibility: hidden;
    }

.video-content {
    width: 200px;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
    position: relative;
    margin: 5px;
    }

.video-title {
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, .3);
    color: white;
    top: 50%;
    left: 50%;
    position: absolute;
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

.video-content:nth-child(3n+1) {
    clear: both;
    }

.button-container {
    clear: both;
    }

#video-container a {
    float: left;
    }   
#video-container{
    width: 100%;
    }

底部将是整个页面的 HTML/Java 来绘制完整的图片。

我希望那个框保留下来，这样授权消息就会保留，但一旦授权，让它说出“点击享受任何视频”之类的话

有什么想法吗？

这是整个页面:

<!DOCTYPE HTML>
<html>
    <head>
        <title>My Sandbox</title>
        <link rel="stylesheet" type="text/css" href="CSS/Style.CSS">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
        </script>   
        <script>

      //This set of scripts asks a first time user for their name and then greets them by name on the page and on their next visit
      function getCookie(c_name)
        {
        var c_value = document.cookie;
        var c_start = c_value.indexOf(" " + c_name + "=");
          if (c_start == -1){
            c_start = c_value.indexOf(c_name + "=");
          }
          if (c_start == -1){
            c_value = null;
          }
          else{
            c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
          if (c_end == -1){
            c_end = c_value.length;
          }
            c_value = unescape(c_value.substring(c_start,c_end));
          }
          return c_value;
          }

      function setCookie(c_name,value,exdays){
        var exdate=new Date();
          exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
          document.cookie=c_name + "=" + c_value;
          }

      function checkCookie(){
        var username=getCookie("username");
          if (username!=null && username!=""){
                        alert("Welcome back " + username);
                        document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
                        }
          else{
            username=prompt("Please enter your name:","");
            if (username!=null && username!=""){
              setCookie("username",username,365);
              document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
              }
          }
      }

      //This is the script to change the video source
            jQuery(function($){
              $("#video-container").on('click', '.video_select', function(e){
                console.log(e);
                var buttonSource = $(this).data('video');
                var embededVideo = $('#youTube_video');
                    embededVideo.attr('src', buttonSource);
                    return false;
              });
            });

        //This is the Client ID from https://code.google.com/apis/console
        var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
        var OAUTH2_SCOPES = [
          'https://www.googleapis.com/auth/youtube'
        ];

        // This callback is invoked by the Google APIs JS client automatically when it is loaded.
        googleApiClientReady = function() {
          gapi.auth.init(function() {
            window.setTimeout(checkAuth, 1);
          });
        }

        // I want to get rid of this...  If the user hasn't aythorized Google to run the API, the user has to click a button to authoize google to run teh API.  Why?  It was in the original google example that I took from the Google Dev page.  Everything here is dervied and partially rewritten from that.
        function checkAuth() {
          gapi.auth.authorize({
            client_id: OAUTH2_CLIENT_ID,
            scope: OAUTH2_SCOPES,
            immediate: true
          }, handleAuthResult);
        }

        // gapi.auth.authorize() call.
        function handleAuthResult(authResult) {
          if (authResult) {
            $('.pre-auth').hide();
            loadAPIClientInterfaces();
          } else {
            $('#login-link').click(function() {
              gapi.auth.authorize({
                client_id: OAUTH2_CLIENT_ID,
                scope: OAUTH2_SCOPES,
                immediate: false
                }, handleAuthResult);
            });
          }
        }
        function loadAPIClientInterfaces() {
          gapi.client.load('youtube', 'v3', function() {
            handleAPILoaded();
          });
        }
      var playlistId, nextPageToken, prevPageToken;

      // Once the api loads call a function to get the uploads playlist id.
      function handleAPILoaded() {
        requestUserUploadsPlaylistId();
      }

      //Retrieve the uploads playlist id.
      function requestUserUploadsPlaylistId() {
        var request = gapi.client.youtube.channels.list({
          id: 'UCziks4y-RixDhWljY_es-tA',
          part: 'contentDetails'
        });
        request.execute(function(response) {
          console.log(response);
          playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
          requestVideoPlaylist(playlistId);
        });
      }

      // Retrieve a playist of videos.
      function requestVideoPlaylist(playlistId, pageToken) {
        $('#video-container').html('');
        var requestOptions = {
          playlistId: playlistId,
          part: 'snippet',
          maxResults: 15
        };
        if (pageToken) {
          requestOptions.pageToken = pageToken;
        }
        var request = gapi.client.youtube.playlistItems.list(requestOptions);
        request.execute(function(response) {
          // Only show the page buttons if there's a next or previous page.
          console.log (response);
          nextPageToken = response.result.nextPageToken;
          var nextVis = nextPageToken ? 'visible' : 'hidden';
          $('#next-button').css('visibility', nextVis);
          prevPageToken = response.result.prevPageToken
          var prevVis = prevPageToken ? 'visible' : 'hidden';
          $('#prev-button').css('visibility', prevVis);

          var playlistItems = response.result.items;
          if (playlistItems) {
            // For each result lets show a thumbnail.
            jQuery.each(playlistItems, function(index, item) {
              createDisplayThumbnail(item.snippet);
            });
          } else {
            $('#video-container').html('Sorry you have no uploaded videos');
          }
        });
      }

      // Create a thumbnail for a video snippet.
      function createDisplayThumbnail(videoSnippet) {
        console.log(videoSnippet);
        var titleEl = $('<h3>');
        titleEl.addClass('video-title');
        $(titleEl).html(videoSnippet.title);
        var thumbnailUrl = videoSnippet.thumbnails.medium.url;
        var videoLink=$('<a>');
        videoLink.attr('data-video','http://www.youtube.com/embed/'+videoSnippet.resourceId.videoId+'?autoplay=1');
        videoLink.append(div)
        videoLink.addClass('video_select')

        var div = $('<div>');
        div.addClass('video-content');
        div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
        div.append(titleEl);
        videoLink.append(div)
        $('#video-container').append(videoLink);

      }

      // Retrieve the next page of videos.
      function nextPage() {
        requestVideoPlaylist(playlistId, nextPageToken);
      }

      // Retrieve the previous page of videos.
      function previousPage() {
        requestVideoPlaylist(playlistId, prevPageToken);
      }
    </script>

    </head>
<body onload="checkCookie()" class="background_color">
<div class="wrap">
  <div class="back_image">
  <img src="Pictures/titlepic.jpg" width="1060" height="200">
  <h1 class="text_over_image" id="title_script">Welcome to my Sandbox</h1>
  </div>
  <div>
     <iframe id='youTube_video' width="1060" height="597" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
  </div>
  <div id="login-container" class="pre-auth back_image">Please click <a href="#" id="login-link">this link</a> to load the playlist.  It will pull authorization for the API from your Google account
    <img src="Pictures/AuthButtons.jpg" width="1060" height="20">
  </div>
  <div id="video-container">
  </div>
  <div class="button-container back_image">
  <img src="Pictures/Footer.jpg" width="1060" height="75">
  <button id="prev-button" class="paging-button text_over_image" onclick="previousPage();">Previous Page</button>
  <button id="next-button" class="paging-button text_over_image" onclick="nextPage();">Next Page</button>
  </div>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>

</body>
</html>

最佳答案

在您的函数 handleAuthResult 中，您有一行 $('.pre-auth').hide();。你应该改变它来设置你想要的文本而不是隐藏它。所以像这样:

function handleAuthResult(authResult) {
    if (authResult) {
        $('.pre-auth').html('click to enjoy any of these videos');
        loadAPIClientInterfaces();
    } else {
        $('#login-link').click(function () {
            gapi.auth.authorize({
                client_id: OAUTH2_CLIENT_ID,
                scope: OAUTH2_SCOPES,
                immediate: false
            }, handleAuthResult);
        });
    }
}

关于Javascript 和 CSS 导致文本框消失，我希望它保留，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18736302/

文章推荐： html - 在所有页面上使用两个线程打印表头

文章推荐： c++ - 对于可能在结束前被中断的迭代，使用什么循环？

文章推荐： c++ - 从堆栈中删除对象

文章推荐： javascript - Image Fader 的多个副本

css - 如何将 CSS 文件的 CSS 规则包含到另一个 CSS 文件的选择器中？
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
css - 将 css 文件移动到新的 css 文件夹后无法从我的 css 访问我的图片
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
css - css 3 中是否有任何 css 类分组 css 类？
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
css - 使用内联 CSS 删除从 CSS 文件继承的 CSS 属性
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
css - 初始规模与 desktop.css+phone.css+tablet.css？
我刚刚发现了 initial-scale 元属性。以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
css - LESS CSS - 提取生成的 CSS
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
css - 如何将内联 CSS 转换为外部 CSS？
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？最佳答案就像有人说的那样，“
css - 来自样式化组件时 CSS 模块中的动态 CSS
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
css - 在 CSS 中引用 CSS
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
css - 如何基于一个元素的 CSS 或它的前一个相邻兄弟的 CSS？
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。我的问题在于让按
css - 浏览器是否在加载 CSS 文件时解析 CSS？
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？这个问题不是 Load and executi
css - 将已经定义的 CSS 添加到另一个 CSS
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。标题有点乱，我给大家看一下。假
css - css/main.css 是否还有其他用途？
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
css - 如果缺少所需的 css，则加载备用 css
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。我有很多 css
css - CSS 框架和 CSS 网格有什么区别
请告诉我 CSS 框架和 CSS 网格之间的区别。最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
css - 如何摆脱从 css 文件继承的 css？
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
css - 带有 CSS 模块的普通 CSS
我以前使用 bootstrap css import 很好。但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
css - CSS 中的嵌套 CSS 选择器
有没有办法在 css 选择器中创建一个 css 组。例如: .SectionHeader { include: .foo; include: .bar; include: .
css - CSS 定位和 CSS 边距之间的区别
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
css - Gulp CSS 任务不会覆盖现有的 CSS
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript 和 CSS 导致文本框消失，我希望它保留