Change Iframe Src by Clicking a Link

Change iframe src by clicking a link

You don't need jQuery for that. You don't even need JavaScript for that.

Give your iframe a name, and target your anchors to point to it:

<a href="foo.html" target="myiframe">Foo</a>
<a href="bar.html" target="myiframe">Bar</a>
<a href="baz.html" target="myiframe">Baz</a>

<iframe name="myiframe"></iframe>

This degrades nicely for people who have JavaScript turned off.

How can I change iframe src by clicking on different divs?

Here is a working example of changing src on click of buttons and every time changed src is displayed.

• First src values are provided in a array
• Now looped through all the tags with class .srcChanger and added event listener which actives on click .
• Then function is executed which takes value from array according to i th value of tag

var locations = ["https://www.youtube.com/embed/K0u_kAWLJOA",
  "https://www.youtube.com/embed/c7nRTF2SowQ",
  "https://www.youtube.com/embed/6LOD-pwJY6E",
  "https://www.youtube.com/embed/8X2kIfS6fb8",
  "https://www.youtube.com/embed/p5yUKjOOWvM"
];

var btnSrc = document.getElementsByClassName("srcChanger");
for (let i = 0; i < btnSrc.length; i++) {
  btnSrc[i].addEventListener('click', function() {
    document.getElementsByClassName("responsive_frame")[0].src = locations[i];
    document.getElementById("demo").innerHTML = locations[i];
  })
}

<div class="full">
  <iframe id="iframe" class="responsive_frame" src="https://www.youtube.com/embed/K0u_kAWLJOA"></iframe>
</div>
<button class="srcChanger">Btn1</button>
<button class="srcChanger">Btn2</button>
<button class="srcChanger">Btn3</button>
<button class="srcChanger">Btn4</button>
<button class="srcChanger">Btn5</button>

<div id="demo"></div>

iframe src change on button click

function newSrc() {  var e = document.getElementById("MySelectMenu");  var newSrc = e.options[e.selectedIndex].value;  document.getElementById("MyFrame").src=newSrc;}

<iframe src="https://beamtic.com/" style="width:450px;height:450px;overflow:scroll;" id="MyFrame"></iframe><select id="MySelectMenu">  <option value="https://beamtic.com/">Beamtic</option>  <option value="https://fr.wikipedia.org/wiki/Main_Page">Wiki</option></select><button onClick="newSrc();">Change Iframe Src</button>

Can I change iframe src without js or ID's?

You can use an html link outside of the iframe, and set the target to the name of the iframe.

See the w3schools Example Here

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

If the link is inside the iframe, you simply need to set target=_self on the link.

<a href="http://www.w3schools.com" target="_self">W3Schools.com</a></p>

Making a link to change src on iframe

Give the frame a name, then use the target attribute, forget JS.

<a href="http://example.net/" target="myFrame">Example</a>

<iframe name="myFrame" src="http://example.com/">
    Alternative content for non-frame systems
</iframe>

How to change iframe src with click event from another component in Angular 10

You can use a subject to share data between components.
You need a service:

Iframe Service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IFrameService {

  private srcSubject = new Subject<string>();

  srcObservable$: Observable<string> = this.srcSubject.asObservable();

  constructor() { 
  }

  changeSrc(incomingSrc) {
    this.srcSubject.next(incomingSrc);
  }
}

Than you'll inject the service in both components: menu and the iframe component

Menu TS File

At the header component file, you will change your changeSrc method, which will call the iFrame Service next method, that will emit the new value for the subject that you created.

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  menu:boolean = false;

  constructor(private translate: TranslateService,
              private sanitizer: DomSanitizer,
              private iframeService: IFrameService)
    {  }

  ngOnInit(): void {

  }

  first_url = "https://www.youtube.com/embed/4oP20QZxahk";
  second_url = "https://www.youtube.com/embed/Q_ZPBqVF0_8";
  current_url: SafeUrl;

  updateSrc(url) {
      this.iframeService.changeSrc(this.sanitizer.bypassSecurityTrustResourceUrl(url);)
  }
}

IFrame Component File

At the Iframe component file, you will create a new instance of the service like you did for the header file, but you must instantiate it as a public service, so you will be able to use the service in your template. At your HTML you will subscribe to the observable using the async pipe.

<div class="center">
  <iframe width="640" height="360" id="frame" frameborder="0" src="https://www.youtube.com/embed/4oP20QZxahk" [src]="iframeService.srcObservable | async" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--<div class="pairs">
      <button md-button (click)="updateSrc(first_url)" id="first" class="top-link">Video en español</button>
      <button md-button (click)="updateSrc(second_url)" id="second" class="top-link">Video in english</button>
  </div> -->
</div>

If you still have doubts of how to use subjects and the observable pattern, take a look at this video.

---

Related Topics