Javascript 返回时CSS丢失（浏览器按钮）_Javascript_Php_Jquery_Css_Laravel

Javascript 返回时CSS丢失（浏览器按钮）

javascript php jquery css laravel

Javascript 返回时CSS丢失（浏览器按钮）,javascript,php,jquery,css,laravel,Javascript,Php,Jquery,Css,Laravel,我正在创建一个CMS，您在其版本7中使用了laravel以及bootstrap 4和jquery。我的问题是，当我点击Google Chrome的后退按钮时（这在Firefox中不会发生），CSS就丢失了。检查控制台，他们不加载CSS或外部Javascript，这在我列出发布内容并推进页面时发生。例如，在第一页上不会给我带来任何问题，但是如果我进入第二页，我会选择一篇文章，然后返回，这种情况会发生这就是设计丢失的时候我通过laravel pager列出文章，但是我使用AJAX不重新加载整

我正在创建一个CMS，您在其版本7中使用了laravel以及bootstrap 4和jquery。我的问题是，当我点击Google Chrome的后退按钮时（这在Firefox中不会发生），CSS就丢失了。检查控制台，他们不加载CSS或外部Javascript，这在我列出发布内容并推进页面时发生。例如，在第一页上不会给我带来任何问题，但是如果我进入第二页，我会选择一篇文章，然后返回，这种情况会发生

这就是设计丢失的时候

我通过laravel pager列出文章，但是我使用AJAX不重新加载整个页面，而是通过在主视图中加载的外部文件来完成。我还有一个名为master.blade.php的文件，其中包含用于web设计功能（如Bootstrap和JQuery）的JAVASCRIPTS和CSS。此文件还包含菜单

后置控制器

    public function show(Request $request){

    $posts = DB::table('posts as posts')->select(['posts.id','posts.title', 'posts.content','posts.url_clean','posts.posted',
    'posts.category_id','posts.created_at', 'posts.updated_at','categories.title AS 
    category_name'])->join('categories', 'categories.id', '=', 'posts.category_id')
    ->orderBy('posts.id','DESC')->paginate(5);
    
    if ($request->ajax()) {
        //return view('dashboard.posts.show_load', ['posts' => $posts ])->render(); 
        return view('dashboard.posts.show_load', compact('posts')); 
    }

    else{
        //return view("dashboard.posts.show", ['posts' => $posts ]);
        return view('dashboard.posts.show', compact('posts'));
    }

}

show.blade.php

    <?php
use App\Http\Controllers\dashboard\PostController;
?>
@extends('layouts.master')
@section('banner')
<div class="wrapper">
    <header>
      <div id="banner_1">
        <img src="{{ asset('img/banner1.jpg') }}" class="img-fluid" style="position:inherit; z-index:1; " alt="Responsive image">
      </div>
    </header>
  </div>
@endsection


@section('content')
<div class="container">
  <br></br>
  <div class="col-md-12">
    <div class="form-row">
    <div class="form-group col-md-9">

   
      <div id="posts_data_list">
        @include('dashboard.posts.show_load')
    </div>

    </div>
    <div class="form-group col-md-3">
      <h4 class="d-flex justify-content-between align-items-center mb-3">
        <span class="text-muted">Buscar</span>
        <span class="badge badge-secondary badge-pill">3</span>
      </h4>
      <ul class="list-group mb-3">
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Product name</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$12</span>
        </li>
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Second product</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$8</span>
        </li>
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Third item</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$5</span>
        </li>
        <li class="list-group-item d-flex justify-content-between bg-light">
          <div class="text-success">
            <h6 class="my-0">Promo code</h6>
            <small>EXAMPLECODE</small>
          </div>
          <span class="text-success">-$5</span>
        </li>
        <li class="list-group-item d-flex justify-content-between">
          <span>Total (USD)</span>
          <strong>$20</strong>
        </li>
      </ul>

      <form class="card p-2">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Promo code">
          <div class="input-group-append">
            <button type="submit" class="btn btn-secondary">Redeem</button>
          </div>
        </div>
      </form>
    </div>
</div>

</div>
@endsection

@section('javascript')
<script type="text/javascript">
var posts =  <?php echo json_encode($posts); ?>;
console.log(posts);

$(function () {
        $('body').on('click', '.pagination a', function (e) {
            e.preventDefault();
            $('#load').append('<img style="position: absolute; left: 0; top: 0; z-index: 10000;" src="https://i.imgur.com/v3KWF05.gif />');
            var url = $(this).attr('href');
            window.history.pushState("", "", url);
            load_posts(url);
        });

        function load_posts(url) {
            $.ajax({
                url: url
            }).done(function (data) {
                $('#posts_data_list').html(data);
            }).fail(function () {
                console.log("Failed to load data!");
            });
        }
    });

window.onhashchange =function() {
  location.reload();
}
</script>
@endsection

<?php
use App\Http\Controllers\dashboard\PostController;
?>


<div id="load" style="position: relative;">
@foreach ($posts as $post)
           <?php


            $doc = new DOMDocument();
            @$doc->loadHTML($post->content);

            $images = $doc->getElementsByTagName('img');
            $img_array = array();

            if (count($images) >=1 ) {
            
                for ($i=0; $i <count($images) ; $i++) { 
                    $img_array[] = $images[$i]->getAttribute('src');
                }
            }

            //else{ $img_array[] = ""; }
            
            //echo $img_array[0];

                

            echo '<div class="row">
              <div class="col-md-4">';
                if (empty($img_array)) {
                    echo  '<img src="'.asset("img/layouts/no_imagen.png").'" class="w-100">';
                }
                else{
                  echo '<img src="'.$img_array[0].'" class="w-100" >';
                }
                 
          echo  '</div>
             <div class="col-md-8 px-3">
              <div class="card-block px-3">
                <h4 class="card-title">'.$post->title.'</h4>';
                echo '<a href="#" class="btn-outline-danger"><small>'.$post->category_name.',</small></a> ';
                $tags = (new PostController)->tag_list_single($post->id);
                for ($i=0; $i < count($tags) ; $i++) { 
                  //echo '<a href="#" class="btn-outline-info"><small>'.$tags[$i]["title"].',</small></a> ';
                  if ($i == count($tags) - 1) {
                    echo '<a href="#" class="btn-outline-info"><small>'.$tags[$i]["title"].'</small></a> ';
                  }
                  else{ echo '<a href="#" class="btn-outline-info"><small>'.$tags[$i]["title"].',</small></a> ';}
                }
  
            echo '<p class="card-text text_limit">'.Str::limit($post->content,260).'</p>
                  <p class="card-text text_limit">';
                
            echo '</p><a href="'.route('show_single', $post->url_clean).'" class="btn btn-primary">Leer mas</a>
              </div>
            </div>
        </div>
        <br></br>';

    ?>
@endforeach
</div>
{!! $posts->render() !!}

这是在页面上列出文章的地方，当单击寻呼机时，通过AJAX调用show_load.blade.php

    <?php
use App\Http\Controllers\dashboard\PostController;
?>
@extends('layouts.master')
@section('banner')
<div class="wrapper">
    <header>
      <div id="banner_1">
        <img src="{{ asset('img/banner1.jpg') }}" class="img-fluid" style="position:inherit; z-index:1; " alt="Responsive image">
      </div>
    </header>
  </div>
@endsection


@section('content')
<div class="container">
  <br></br>
  <div class="col-md-12">
    <div class="form-row">
    <div class="form-group col-md-9">

   
      <div id="posts_data_list">
        @include('dashboard.posts.show_load')
    </div>

    </div>
    <div class="form-group col-md-3">
      <h4 class="d-flex justify-content-between align-items-center mb-3">
        <span class="text-muted">Buscar</span>
        <span class="badge badge-secondary badge-pill">3</span>
      </h4>
      <ul class="list-group mb-3">
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Product name</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$12</span>
        </li>
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Second product</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$8</span>
        </li>
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Third item</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$5</span>
        </li>
        <li class="list-group-item d-flex justify-content-between bg-light">
          <div class="text-success">
            <h6 class="my-0">Promo code</h6>
            <small>EXAMPLECODE</small>
          </div>
          <span class="text-success">-$5</span>
        </li>
        <li class="list-group-item d-flex justify-content-between">
          <span>Total (USD)</span>
          <strong>$20</strong>
        </li>
      </ul>

      <form class="card p-2">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Promo code">
          <div class="input-group-append">
            <button type="submit" class="btn btn-secondary">Redeem</button>
          </div>
        </div>
      </form>
    </div>
</div>

</div>
@endsection

@section('javascript')
<script type="text/javascript">
var posts =  <?php echo json_encode($posts); ?>;
console.log(posts);

$(function () {
        $('body').on('click', '.pagination a', function (e) {
            e.preventDefault();
            $('#load').append('<img style="position: absolute; left: 0; top: 0; z-index: 10000;" src="https://i.imgur.com/v3KWF05.gif />');
            var url = $(this).attr('href');
            window.history.pushState("", "", url);
            load_posts(url);
        });

        function load_posts(url) {
            $.ajax({
                url: url
            }).done(function (data) {
                $('#posts_data_list').html(data);
            }).fail(function () {
                console.log("Failed to load data!");
            });
        }
    });

window.onhashchange =function() {
  location.reload();
}
</script>
@endsection

<?php
use App\Http\Controllers\dashboard\PostController;
?>


<div id="load" style="position: relative;">
@foreach ($posts as $post)
           <?php


            $doc = new DOMDocument();
            @$doc->loadHTML($post->content);

            $images = $doc->getElementsByTagName('img');
            $img_array = array();

            if (count($images) >=1 ) {
            
                for ($i=0; $i <count($images) ; $i++) { 
                    $img_array[] = $images[$i]->getAttribute('src');
                }
            }

            //else{ $img_array[] = ""; }
            
            //echo $img_array[0];

                

            echo '<div class="row">
              <div class="col-md-4">';
                if (empty($img_array)) {
                    echo  '<img src="'.asset("img/layouts/no_imagen.png").'" class="w-100">';
                }
                else{
                  echo '<img src="'.$img_array[0].'" class="w-100" >';
                }
                 
          echo  '</div>
             <div class="col-md-8 px-3">
              <div class="card-block px-3">
                <h4 class="card-title">'.$post->title.'</h4>';
                echo '<a href="#" class="btn-outline-danger"><small>'.$post->category_name.',</small></a> ';
                $tags = (new PostController)->tag_list_single($post->id);
                for ($i=0; $i < count($tags) ; $i++) { 
                  //echo '<a href="#" class="btn-outline-info"><small>'.$tags[$i]["title"].',</small></a> ';
                  if ($i == count($tags) - 1) {
                    echo '<a href="#" class="btn-outline-info"><small>'.$tags[$i]["title"].'</small></a> ';
                  }
                  else{ echo '<a href="#" class="btn-outline-info"><small>'.$tags[$i]["title"].',</small></a> ';}
                }
  
            echo '<p class="card-text text_limit">'.Str::limit($post->content,260).'</p>
                  <p class="card-text text_limit">';
                
            echo '</p><a href="'.route('show_single', $post->url_clean).'" class="btn btn-primary">Leer mas</a>
              </div>
            </div>
        </div>
        <br></br>';

    ?>
@endforeach
</div>
{!! $posts->render() !!}


@扩展（'layouts.master'）
@节（“横幅”）
@端部
@节（“内容”）



@包括（'dashboard.posts.show_load'）
客车
3.


产品名称
简述
$12


第二产品
简述
$8


第三项
简述
$5


促销代码
示例代码
-$5


总额（美元）
20美元


赎回
@端部
@节（“javascript”）
var posts=；
控制台日志（posts）；
$（函数（）{
$（'body'）。在（'click'，'上。分页a'，函数（e）{
e、 预防默认值（）；
$（'#加载'）。追加（''）；
var url=$（this.attr（'href'）；
window.history.pushState（“，”，url）；
加载帖子（url）；
});
函数加载_帖子（url）{
$.ajax({
url:url
}).完成（功能（数据）{
$（'#posts_data_list'）.html（数据）；
}).fail（函数（）{
log（“加载数据失败！”）；
});
}
});
window.onhashchange=函数（）{
location.reload（）；
}
@端部

显示_load.blade.php

    <?php
use App\Http\Controllers\dashboard\PostController;
?>
@extends('layouts.master')
@section('banner')
<div class="wrapper">
    <header>
      <div id="banner_1">
        <img src="{{ asset('img/banner1.jpg') }}" class="img-fluid" style="position:inherit; z-index:1; " alt="Responsive image">
      </div>
    </header>
  </div>
@endsection


@section('content')
<div class="container">
  <br></br>
  <div class="col-md-12">
    <div class="form-row">
    <div class="form-group col-md-9">

   
      <div id="posts_data_list">
        @include('dashboard.posts.show_load')
    </div>

    </div>
    <div class="form-group col-md-3">
      <h4 class="d-flex justify-content-between align-items-center mb-3">
        <span class="text-muted">Buscar</span>
        <span class="badge badge-secondary badge-pill">3</span>
      </h4>
      <ul class="list-group mb-3">
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Product name</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$12</span>
        </li>
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Second product</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$8</span>
        </li>
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Third item</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$5</span>
        </li>
        <li class="list-group-item d-flex justify-content-between bg-light">
          <div class="text-success">
            <h6 class="my-0">Promo code</h6>
            <small>EXAMPLECODE</small>
          </div>
          <span class="text-success">-$5</span>
        </li>
        <li class="list-group-item d-flex justify-content-between">
          <span>Total (USD)</span>
          <strong>$20</strong>
        </li>
      </ul>

      <form class="card p-2">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Promo code">
          <div class="input-group-append">
            <button type="submit" class="btn btn-secondary">Redeem</button>
          </div>
        </div>
      </form>
    </div>
</div>

</div>
@endsection

@section('javascript')
<script type="text/javascript">
var posts =  <?php echo json_encode($posts); ?>;
console.log(posts);

$(function () {
        $('body').on('click', '.pagination a', function (e) {
            e.preventDefault();
            $('#load').append('<img style="position: absolute; left: 0; top: 0; z-index: 10000;" src="https://i.imgur.com/v3KWF05.gif />');
            var url = $(this).attr('href');
            window.history.pushState("", "", url);
            load_posts(url);
        });

        function load_posts(url) {
            $.ajax({
                url: url
            }).done(function (data) {
                $('#posts_data_list').html(data);
            }).fail(function () {
                console.log("Failed to load data!");
            });
        }
    });

window.onhashchange =function() {
  location.reload();
}
</script>
@endsection

<?php
use App\Http\Controllers\dashboard\PostController;
?>


<div id="load" style="position: relative;">
@foreach ($posts as $post)
           <?php


            $doc = new DOMDocument();
            @$doc->loadHTML($post->content);

            $images = $doc->getElementsByTagName('img');
            $img_array = array();

            if (count($images) >=1 ) {
            
                for ($i=0; $i <count($images) ; $i++) { 
                    $img_array[] = $images[$i]->getAttribute('src');
                }
            }

            //else{ $img_array[] = ""; }
            
            //echo $img_array[0];

                

            echo '<div class="row">
              <div class="col-md-4">';
                if (empty($img_array)) {
                    echo  '<img src="'.asset("img/layouts/no_imagen.png").'" class="w-100">';
                }
                else{
                  echo '<img src="'.$img_array[0].'" class="w-100" >';
                }
                 
          echo  '</div>
             <div class="col-md-8 px-3">
              <div class="card-block px-3">
                <h4 class="card-title">'.$post->title.'</h4>';
                echo '<a href="#" class="btn-outline-danger"><small>'.$post->category_name.',</small></a> ';
                $tags = (new PostController)->tag_list_single($post->id);
                for ($i=0; $i < count($tags) ; $i++) { 
                  //echo '<a href="#" class="btn-outline-info"><small>'.$tags[$i]["title"].',</small></a> ';
                  if ($i == count($tags) - 1) {
                    echo '<a href="#" class="btn-outline-info"><small>'.$tags[$i]["title"].'</small></a> ';
                  }
                  else{ echo '<a href="#" class="btn-outline-info"><small>'.$tags[$i]["title"].',</small></a> ';}
                }
  
            echo '<p class="card-text text_limit">'.Str::limit($post->content,260).'</p>
                  <p class="card-text text_limit">';
                
            echo '</p><a href="'.route('show_single', $post->url_clean).'" class="btn btn-primary">Leer mas</a>
              </div>
            </div>
        </div>
        <br></br>';

    ?>
@endforeach
</div>
{!! $posts->render() !!}


@foreach（$posts作为$post）
@endforeach
{！！$posts->render（）！！}

配置文件以便始终正确加载的最佳方法是什么？我等待您的答案，非常感谢。

这不是我想要的，我已经看到了答案，但谢谢一件简单的事情是在主模板中有所有基本布局，包括所有常见的CSS和JS声明。如果您需要某些刀片服务器的特定样式或javascript，您可以在模板中使用@yield（'styles'）或@yield（'scripts'），并根据需要在每个页面上使用其他样式或脚本。有一点，请确保在引导之前导入jquery，因为它需要它才能正常工作。这不是我想要的，我已经看到了答案，但感谢一件简单的事情是在主模板中有所有基本布局，包括所有常见的CSS和JS声明。如果您需要某些刀片服务器的特定样式或javascript，您可以在模板中使用@yield（'styles'）或@yield（'scripts'），并根据需要在每个页面上使用其他样式或脚本。有一点，请确保在引导之前导入jquery，因为它需要它才能正常工作