javascript - 更改Laravel Blade 中包含URL的变量

所以我有一个包含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

最佳答案

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