CODEWITHSUNDEEP
javascriptjqueryhtmliframe
user2295265
user2295265

Reputation: 71

Change iframe target

I am totally new in JS, resp. I am trying to do something I am not familiar with, but that´s the way I learn things. I am coding html website and I used an iframe element. In this iframe I´d like to show different htmls (on click). So I read some other questions including this one: stackoverflow js iframe and I made this code:

<li><p id="video" class="button"><a target="iframe">VIDEO</a></p></li>
<li><p id="kontakt" class="button"><a target="iframe">KONTAKT</a></p></li>

<li><iframe width="800px" height="1000px" frameBorder="0" name="iframe" src=""></iframe></li>

<script>
    $(".button").on("click", function() {
    $(this).toggleClass("underline");
    $(".button").not(this).removeClass("underline")
    }); 
</script>

<script>
$("#video").on("click", function() {
$('[name="iframe"]').src = "video_iframe.html"
}); 
</script>

<script>
$("#kontakt").on("click", function() {
$('[name="iframe"]').src = "kontakt_iframe.html"
}); 
</script>

But unfortunately it´s not working. What have I done wrong?

Upvotes: 1

Views: 1733

Answers (3)

Marian Gibala
Marian Gibala

Reputation: 884

You don't have to use so many times script tags. If you are using jQuery click event then there is no need to have <a target="iframe">. Try rather this:

<li><p id="video" class="button">VIDEO</p></li>
<li><p id="kontakt" class="button">KONTAKT</p></li>

<li><iframe width="800px" height="1000px" frameBorder="0" name="iframe" src=""> </iframe></li>

<script>
$(".button").on("click", function() {
    $(this).toggleClass("underline");
    $(".button").not(this).removeClass("underline")
}); 


$("#video").on("click", function() {
    $('iframe').attr("src","video_iframe.html") 
}); 


$("#kontakt").on("click", function() {
    $('iframe').attr("src", "kontakt_iframe.html") 
}); 
</script>

Upvotes: 0

sbonkosky
sbonkosky

Reputation: 2557

Try changing this:

$('[name="iframe"]').src = "video_iframe.html"

to

$('[name="iframe"]').attr('src', 'video_iframe.html')

This sets the attribute of src to the value you want.

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

$('[name="iframe"]') is a jQuery object - to access the src property you need to reference the actual native DOM element. 

$('[name="iframe"]')[0].src = "kontakt_iframe.html";

Also - you dont need multiple script tags - just use one and put your code in there.

Upvotes: 0

Related Questions