Изменить переменную, содержащую URL в Laravel blade - PullRequest
Новая
       7

Изменить переменную, содержащую URL в Laravel blade

0 голосов
/ 23 февраля 2020

Итак, у меня есть страница с фреймом. В моей базе данных я сохранил 3 разных URL-адреса: url, url2 и url3. Что происходит, когда я открываю страницу, iframe работает следующим образом: 

<iframe src="{{$episode->url}}"></iframe>

Теперь у меня есть 3 кнопки ниже, что в основном url1 url2 url3. Как видно из кода, url1 открывается по умолчанию. Что я хочу, если выбрать url2, sr c iframe изменится на: 

<iframe src="{{$episode->url2}}"></iframe>

и если я выбрал url3, он изменится на: 

<iframe src="{{$episode->url3}}"></iframe>

без необходимости загрузить другую страницу с другим маршрутом. Также следует отметить, что url2 и url3 являются необязательными и иногда могут быть пустыми, или, скажем, только url1 и url2 имеют url. Это возможно, или я должен создать отдельную страницу для каждого URL для воспроизведения.
Я готов использовать javascript, но следует отметить, что у меня 0 опыта.
Редактировать:
Вот мой полный вид лезвия, потому что его спросили: 

@extends('layouts.app')

@section('title', '{{$episode->name}}')

@section('content')

<header>
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
        <img class="d-block w-100" src="/storage/images/episodes/{{$episode->image}}" alt="First slide">
        </div>
    </div>
    </div>
</header>

<div class="row pb-5">
    <div class="col-md-9">
        <div class="card">
            <div class="card-body">
                <h1 class="card-title">
                    {{$episode->name}}
                </h1>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="{{$episode->url}}"></iframe>
                </div>
                <p class="pt-3">
                    <button class="btn btn-primary btn-sm">Server 1</button>
                    <button class="btn btn-primary btn-sm">Server 2</button>
                    <button class="btn btn-primary btn-sm">Server 3</button>
                </p>
                <p class="subtitle">
                    {{$episode->about}}
                </p>
            </div>
        </div>
    </div>
</div>

@endsection

1 Ответ

1 голос
/ 23 февраля 2020

Вы можете отредактировать ваш HTML, чтобы он был похож на 

<div class="embed-responsive embed-responsive-16by9">
   <iframe id='myIframe' class="embed-responsive-item" src="{{$episode->url}}"></iframe>
</div>
<p class="pt-3">
   <button class="btn btn-primary btn-sm" onClick="newSite('{{$episode->url}}')">Server 1</button>
   <button class="btn btn-primary btn-sm" onClick="newSite('{{$episode->url2}}')">Server 2</button>
   <button class="btn btn-primary btn-sm" onClick="newSite('{{$episode->url3}}')">Server 3</button>
</p>

Затем в вашем JS

<script type="text/javascript">

function newSite($url) {

    document.getElementById('myIframe').src = $url;
}    
</script>
...