v2.5.2
Giriş yap

Jquery sorusu - seçime bağlı ikinci değişiklik

rephp7
44 defa görüntülendi

Merhaba,
Youtube benzeri bir sayfa oluşturdum. Bilgileri veritabanıma kaydediyorum, ordan çekiyorum.
Sağda liste yer alıyor solda ise o listeden seçilen başlığa göre video iframe yer alıyor.

Değişen Video iframe:

<div class="container">
    <div class="video-container">
        <iframe src="https://open.spotify.com/embed/episode/<?= $yayingetir[0]["episode"]; ?>" width="100%" height="232" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
    </div>
</div>

//Aşağıdaki div içindeki açıklamada yukardaki episode göre değişsin istiyorum
<div class="card-body card bg-warning">
    <p class="text text-justify">
        <?= $yayingetir[0]["description"]; ?>
    </p>
 </div>

Tablodan seçim yaptığım kodlar:

<td>
    <span style="cursor:pointer;margin-bottom:10px;" onclick="switchVideo('<?= $yayingetir[$i]['episode']; ?>');">
        <div class="col-xs-12" id="vid-<?= $yayingetir[$i]['episode']; ?>">
            <?= $yayingetir[$i]["baslik"]; ?>
        </div>
    </span>
</td>

Buda scriptim


    $("#vid-<?= $yayingetir[0]["episode"] ?>").addClass('selected');

    function switchVideo(videoId) {
        $(".video-container iframe").attr('src', 'https://open.spotify.com/embed/episode/' + videoId + '?utm_source=generator');
        $(".selected").removeClass('selected');
        $("#vid-" + videoId).addClass('selected');
    }

Bu kodlarla iframe içinden podcastin episodunu değiştiriyorum.
Fakat altına seçilen episoda bağlı olan video açıklamasını da getirmeye çalıştım ama yapamadım onu nasıl yapabilirim?

tayfunerbilen
1 gün önce

iframe içeriğine ulaşmak için jquery'de .contents() metodunu kullanabilirsin ama güvenlikten dolayı büyük ihtimalle erişmen mümkün değil dolayısı ile istediğin şeyde bu aşamada pek mümkün görünmüyor :)

Çünkü iframe'i yeni bir url'le değiştirmek farklı şey, o çerçevenin içinden değer almak bambaşka. Eskiden tarayıcılar izin veriyordu ama artık muhtemelen vermiyordur.

Denemesi bedava tabi ki şu kodu deneyebilirsin

function switchVideo(videoId) {
    $(".video-container iframe").attr('src', 'https://open.spotify.com/embed/episode/' + videoId + '?utm_source=generator');
    $(".selected").removeClass('selected');
    $("#vid-" + videoId).addClass('selected');
    
    // iframe içinden <title> değerini almaya çalışır
    const title = $(".video-container iframe").contents().find('title').html()
} 

muhtemelen tarayıcı bunu neden yapamayacağını daha net söyleyecektir console'da.