how to open a link and contain it within a div

Question

I would like to click on a link and open it inside a div on my page.

<div class="container">
  <ol>
    <li>
      <a href="www.company.com/projects">projects</a>
    </li>
    <li>
      <a href="www.company.com/tasks">tasks</a>
    </li>
    <li>
      <a href="www.company.com/notifications">notifications</a>
    </li>
    <li>
      <a href="www.company.com/overview">overview</a>
    </li>
  </ol>
</div>

When a link is clicked, the page should open within the container div, without the address bar.

UPDATE - If these links were internal to the company, would an I frame still be the right way to go?

You are describing an [iFrame](https://www.w3schools.com/html/html_iframe.asp) — Igor, Sep 10 '19 at 20:23
One last question - If these links were internal to the company, would an I frame still be the right way to go? — Ana_30, Sep 11 '19 at 09:17

Saif Jerbi · Accepted Answer · 2019-09-10T20:41:04.860

You can add an iframe to your container. By clicking the link, you have to update the iframe.src attribut to fill your clicked link

I have update the example for you stackblitz:


import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  link;

  constructor(private sanitizer: DomSanitizer) { }

  openLink(url) {
    this.link = this.sanitizer.bypassSecurityTrustResourceUrl(
      url
    )
  }
}

Html :


<hello name="{{ name }}"></hello>

<p>When a link is clicked, for example "Google", the page<br>
  should open inside the orange div (without the address bar).</p>

<div class="container">
  <ol>
    <li>
      <div (click)="openLink('www.google.com')">Google</div>
    </li>
    <li>
      <div (click)="openLink('www.amazon.com')">Amazon</div>
    </li>
    <li>
      <div (click)="openLink('www.linkedin.com')">Linkedin</div>
    </li>
    <li>
      <div (click)="openLink('www.twitter.com')">twitter</div>
    </li>
  </ol>
  <iframe [src]="link" *ngIf="link"></iframe>
</div>

Thanks! It seems to work really well! I will need to update my styling to make sure the iframe respects the size of the div. ``` ``` [STACKBLITZ](https://stackblitz.com/edit/angular-kybqmc) — Ana_30, Sep 10 '19 at 20:53

score 1 · Answer 2 · answered Sep 10 '19 at 20:24

1

Use an iframe instead of a div:

<iframe src="your-link-here"></iframe>

answered Sep 10 '19 at 20:24

jacob13smith

919
5
12

score 1 · Answer 3 · answered Sep 10 '19 at 20:25

What you are describing is an Iframe. Since you tagged the question with Angular I'm going to assume you want to do it in Angular. Here is a related thread. [enter link description here][1]

How to set iframe src in Angular 2 without causing `unsafe value` exception?

score 1 · Answer 4 · answered Sep 10 '19 at 20:26

I'm assuming you're wanting to "embed" a webpage within that div, so to speak.

This can be accomplished using an iframe.

Place the iframe within your div, for example, to contain it to the positioning of that div.

<div>
  <iframe src="example"></iframe>
</div>

how to open a link and contain it within a div

4 Answers4