在 Laravel 刀片中更改包含 url 的变量答案

【问题标题】：Change variable containing url in Laravel blade在 Laravel 刀片中更改包含 url 的变量
【发布时间】：2020-06-07 10:10:28
【问题描述】：

所以我有一个包含 iframe 的页面。在我的数据库中，我存储了 3 个不同的 url，它们是 url、url2 和 url3。当我打开页面时会发生什么，iframe 以这种方式工作：

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

现在我下面有3个按钮，基本上就是url1 url2 url3。从代码中可以看出，url1 默认是打开的。我想要的是如果选择 url2，则 iframe 的 src 更改为：

<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

【问题讨论】：

你能添加你的完整刀片代码吗？
@FouedMOUSSI 当然，我刚刚将它添加到我上面的问题中
检查我的答案

标签： javascript laravel laravel-blade

【解决方案1】：

您可以将您的 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>

【讨论】：