javascript - how to open a link and contain it within a div - Stack Overflow

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

Here's the Stackblitz!

<div class="container">
  <ol>
    <li>
      <a href="wwwpany/projects">projects</a>
    </li>
    <li>
      <a href="wwwpany/tasks">tasks</a>
    </li>
    <li>
      <a href="wwwpany/notifications">notifications</a>
    </li>
    <li>
      <a href="wwwpany/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 pany, would an I frame still be the right way to go?

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

Here's the Stackblitz!

<div class="container">
  <ol>
    <li>
      <a href="www.pany./projects">projects</a>
    </li>
    <li>
      <a href="www.pany./tasks">tasks</a>
    </li>
    <li>
      <a href="www.pany./notifications">notifications</a>
    </li>
    <li>
      <a href="www.pany./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 pany, would an I frame still be the right way to go?

• javascript
• angular
• typescript

Share Improve this question Follow edited Sep 11, 2019 at 9:26 Ana_30 asked Sep 10, 2019 at 20:17 Ana_30Ana_30 37577 silver badges1919 bronze badges 2

• 4 You are describing an iFrame – Igor Commented Sep 10, 2019 at 20:23
• One last question - If these links were internal to the pany, would an I frame still be the right way to go? – Ana_30 Commented Sep 11, 2019 at 9:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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.ponent.html',
  styleUrls: ['./app.ponent.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.')">Google</div>
    </li>
    <li>
      <div (click)="openLink('www.amazon.')">Amazon</div>
    </li>
    <li>
      <div (click)="openLink('www.linkedin.')">Linkedin</div>
    </li>
    <li>
      <div (click)="openLink('www.twitter.')">twitter</div>
    </li>
  </ol>
  <iframe [src]="link" *ngIf="link"></iframe>
</div>

Use an iframe instead of a div:

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

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?

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

This can be acplished 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>