Question

我正在开发一个Ruby on Rails网络应用程序。此应用程序允许用户通过表单上传视频（使用载波作为上传器和cloudinary作为存储空间），该模式位于模态中。

用户完成表单并点击“提交按钮”后，我会使用javascript代码显示一个短暂的页面（这是我的共享/ loading.html.erb视图，在帖子下方复制）在上传视频时（因为上传可能需要一些时间......）。

最后，一旦上传完成，短暂的页面就会消失，用户将被重定向到上传的视频（感谢我的控制器中'创建方法'末尾的传统'redirect_to'。

在Chrome上，此机制完美运行，浏览器检查器中没有任何警告或错误消息;
在Safari上，它不起作用，我想了解原因。目前的情况是，点击“提交”按钮后，视频正在上传，即时加载页面没有正确显示（它没有显示或显示但没有javascript），并且重定向在上传完成后正常工作。只有当我点击Safari导航栏中的“交叉”按钮时，为了停止上传过程，短暂的加载页面才能正常工作。

这是我的js代码，位于我的html.erb表单的末尾：

<!-- My form and modals are above (not shown) -->

<!-- NB: the autocomplete module is in assets/javascript/autocomplete.js -->
<%= content_for :after_js do %>
  <script>
    // Start of js to display the modal
    $('#review_video').change(function(){
      $('#myModal').modal('show');
    });
    // End of js to display the modal

    // Start of js to show an ephemeral loading page
    $( "#click-trigger" ).on( "click", function() {
      console.log('test 1 - in the click-trigger function');
      var newContent = '<%= j render "shared/loading", layout: false %>';
      document.write(newContent);
    });
    // End of js for loading page

  </script>
<% end %>

而且，这里是我在javascript中调用的短暂部分（shared / loading.html.erb）（如果你想到其他有趣的事实，请告诉我）。）。

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: 'Muli', sans-serif;
        font-size: 0.9em;
        background-color: #0098DE;
      }
      .container {
        margin: 100px 15px 20px 15px;
        /*padding: 20px;*/
      }
      .funfacts-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .funfacts-content {
        flex: 0 0 75%;
        color: white;
        font-size: 1.2em;
      }
    </style>
  </head>
  <body>
    <div class="funfacts-container">
      <div class="funfacts-content">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 text-center">
              <h1>Loading...</h1>
              <h3>Did you know?</h3>
              <span class="loading_element"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      function shuffle(a) {
          console.log('test 3 - beginning of shuffle function');
          var j, x, i;
          for (i = a.length; i; i -= 1) {
              j = Math.floor(Math.random() * i);
              x = a[i - 1];
              a[i - 1] = a[j];
              a[j] = x;
          }
          console.log('test 4 - end of shuffle function');
      }
      var funFacts = ['Gorillas burp when they\'re happy. ^1000','Butterflies taste their food with their feet (and so do our co-founders). ^1000','Studies show that eating spicy food helps you live longer. ^1000','Some turtles breath through their anus. ^1000', 'Ketchup was sold in the 1830\'s as medicine. ^1000'];
      shuffle(funFacts);
      console.log(funFacts);

      console.log('test 2 - in the scrip div of loading.html.erb');
      console.log($('.loading_element'));
      $('.loading_element').typed({
        strings: funFacts,
        loop: true,
        startDelay: 50,
        backSpeed: 15,
        typeSpeed: 30,
        loop: true
      });
      console.log('test 5 - end of .typed script');
    </script>

  </body>
</html>

到目前为止我要做的是调试：

我在javascript代码的不同部分使用了一些console.log（你可以看到它们）。我得出结论，我所有的js都正常工作，但HTML + CSS没有正确显示。
在检查员中我也看到我有一些警告：'意外的CSS令牌:: application-043b483a981042bf2f279f5d418ffcf14d7465d7eae287ea11754a58afff3395.css：4939'。如果我单击此错误消息，它会将我带到一些我自己没有创建的引导代码。该错误与'filter：progid：DXImageTransform.Microsoft.gradient'一致（见下文）。

.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
    cursor: not-allowed;
}

据我所知，警告与CSS类连续两次使用符号“：”这一事实有关，我可能会使用一些简单的引号来修复警告消息。但是，我自己并没有创建这行代码，它似乎位于这里：'第110行，/ Users /quentinroquigny / .rbenv /versions / 2.3.0 / lib /ruby / gems / 2.3 / age / bootstrap -sass-3.3.6 / assets / stylesheets / bootstrap / _dropdowns.scss * /'，即在bootstrap gem中...... 既然这是一个警告（不是错误），我想这不是问题的根源。

感谢你的想法！

Javascript'document.write'生成新的HTML + CSS + JS无法在Safari上工作但在Chrome上工作

0 个答案: