Dynamically Set Iframe Src

dynamically set iframe src

<script type="text/javascript">
function iframeDidLoad() {
    alert('Done');
}

function newSite() {
    var sites = ['http://getprismatic.com',
                 'http://gizmodo.com/',
                 'http://lifehacker.com/']

    document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}    
</script>
<input type="button" value="Change site" onClick="newSite()" />
<iframe id="myIframe" src="http://getprismatic.com/" onLoad="iframeDidLoad();"></iframe>

Example at http://jsfiddle.net/MALuP/

Changing Iframe src dynamically

I think the code runs to early, JS tries to find a element with that id, but there isn't a element because the body isn't loaded. Try to place to code to the bottom of the page or put it in a function and execute that function on for example page load.

    <script>
    function loadIframe(){
    // getting value from localstorage

    var x = localStorage.getItem("firstname");
    //alert showing the value 

    alert(x);
    //but this is not working.
    document.getElementById("framee").src='https://thingspeak.com/channels/' + x +'/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15';
    }
    </script>

    <body onLoad="loadIframe()"> 

    <iframe id="framee" ></iframe>

    </body>

iframe src property as a URL dynamically Angular2

Step 1 - In HTML page - example string can be html, url, style, script etc

[src] = "exampleString | safe: 'url'"

Step 2 - Create a safe pipe

Safe Pipe Code

import { DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl } from "@angular/platform-browser";
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "safe" })
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
        switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
    }
}

Note: - As per safe pipe is concerned you have to implement it in order to stop DOMSanitizer to strip out content from your URL.

Please check the below URL for how to implement safe pipe. Link

Dynamically changing the iFrame src on dropdown selection

You seem to lack some understanding of how the angular data-binding should be used, and you have some blatant issues in your Typescript file.

First, the constructor of your class AppComponent should be IN said class, not before:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    ...

    constructor(private sanitizer: DomSanitizer) {
    }

    ...
}

Second, in your view, if you want to bind the value of src to a variable in your typescript, then use [src], like so:

<iframe width="1140" height="541.25" [src]="safeUrl" frameborder="0" allowFullScreen="true"></iframe>

The last issue is that you only declare safeUrl in the selectedOption of your component, it's not a member variable of the component itself, so the view cannot access it, you should change your component like so:

export class AppComponent {
    title = 'PowerBIIntegration';
    selectedValue: string = '';
    safeUrl: string;

    constructor(private sanitizer: DomSanitizer) {
    }

    selectedOption(event : any) {
        this.selectedValue = event.target.value;
        this.safeUrl = this.sanitizer.bypassSecurityTrustHtml(this.selectedValue);
    }
}

Change to change iframe source dynamically

The problem is as your script tag is getting executed before the DOM loading; your document.getElementById("test") code returns nothing. You may use <body onload="myfunction()"> and write your required code in it so that it will get executed after the DOM loaded or you may try below jQuery apporach:

$(document).ready(function(){      $("#test").attr("src","http://stackoverflow.com/questions/42504395/change-to-change-iframe-source-dynamically");    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><iframe id="test" src="https://www.w3schools.com"></iframe>

Dynamically set the src of an iframe to delay loading

The issue is because you're using find() on this, which refers to the a which was clicked and the iframe is not a descendant of that element.

To fix this you can use the href attribute of the clicked a as the selector.

$('.index-topic').click(function(e) {
  e.preventDefault();

  let selector = $(this).attr('href');
  $(selector).find('iframe').prop("src", function() {
    return $(this).data("src");
  }).addClass('active').siblings().removeClass('active');
});

<ul>
  <li> <a href="#index1" class="index-topic">Topic Name</a> </li>
  <li> <a href="#index2" class="index-topic">Topic Name</a> </li>
  <li> <a href="#index3" class="index-topic">Topic Name</a> </li>
</ul>

<section id="index1" class="index-content">
  <div>
    Some text about the topic
  </div>
  <div>
    <iframe class="data-embed" data-src="data-source-URL" src=""></iframe>
  </div>
</section>

Set iFrame src value dynamically

Try this,

 $('#iFrameBlog').attr('src', blogUrl);

instead of

 $('#iFrameBlog').src = blogUrl;

Dynamically Set Iframe Src