Leveraging an AngularJS variable within an iframe

Question

Leveraging an AngularJS variable within an iframe

Is it possible to use a variable inside an iframe src or ng-src attribute? I've tried different variables but none seem to be recognized. For example:

<iframe ng-src="http://www.example.com/?name={{test}}">
</iframe>

The variable test just displays as {{test}}.

I also attempted using $sce to treat it as a trusted url, but that did not work either.

Am I missing something here? Is there something specific about iframes and angularjs that I should know about? Any insights would be greatly appreciated!

Thank you in advance.

html angularjs iframe

Answer 1

Answer №1

Give this a shot: Within your controller, make the following change - instead of using ng-src="{{test}}", assign the full URL to a variable. and then -

$scope.test=$sce.trustAsResourceUrl("https://www.example.com");

Don't forget to add $sce to your controller's dependencies.

This solution worked for me. Hopefully, it works for you too.

Answer 2

Give this a shot: Within your controller, make the following change - instead of using ng-src="{{test}}", assign the full URL to a variable. and then -

$scope.test=$sce.trustAsResourceUrl("https://www.example.com");

Don't forget to add $sce to your controller's dependencies.

This solution worked for me. Hopefully, it works for you too.

Answer 3

Answer №2

You have the ability to assign a value to the src property using this format:

iframeObject.src = URL

Important point: URL indicates the address of the content you wish to embed, and it can be either an absolute or relative URL.

For instance:

document.getElementById('embedContent').src = "http://www.example.com";

#embedContent{
        width: 600px;
        height: 500px;
    }

<iframe id="embedContent" src="#"></iframe>

If you also intend to combine / blend two strings, simply adjust the JavaScript code to

document.getElementById('embedContent').src = "http://www.example.com/?name=" + test;

Answer 4

You have the ability to assign a value to the src property using this format:

iframeObject.src = URL

Important point: URL indicates the address of the content you wish to embed, and it can be either an absolute or relative URL.

For instance:

document.getElementById('embedContent').src = "http://www.example.com";

#embedContent{
        width: 600px;
        height: 500px;
    }

<iframe id="embedContent" src="#"></iframe>

If you also intend to combine / blend two strings, simply adjust the JavaScript code to

document.getElementById('embedContent').src = "http://www.example.com/?name=" + test;

Leveraging an AngularJS variable within an iframe

Answer №1

Answer №2

Similar questions

Achieving an oval shape using HTML5 and CSS3: Step-by-step guide

Is there a way to implement word wrapping in li text without making any changes to its width

Different method for adding child elements to the DOM

Customizing a responsive background image within a div using Bootstrap 3

What is the best way to line up a Material icon and header text side by side?

Troubleshooting problem: Scrolling problem in IE7 and IE8 with Lightbox

If the text is too lengthy, enclose it within a div element

Prevent a click event from triggering on one div when another div is clicked using jQuery

Jquery Timer that can be toggled on and off with a single button

Having trouble with the $push operator in Mongo DB?

What is the best approach for transmitting file and form data from an AngularJS application to a Node.js server?

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Keeping information saved locally until an internet connection is established

Guide to adding an icon within an HTML `<input>` element

Footer displays within the content section

Unveiling the Secrets of Implementing Interactive HTML Tabs

Remove the footer from the main section

Updating the email header for responding to New Order and shipped email notifications in Woocommerce

Issue: Attempting to send a POST request to the specified API endpoint for creating a product category resulted in a 500 Internal Server Error