looking to switch out the iframe when clicked

Whenever a user clicks on the getPrice button again and selects different input, I want to replace the iframe. Despite trying multiple approaches in my code, nothing seems to work out. Using document.body.appendChild() every time is not an option for me. Can someone please provide guidance on this issue?

function getPrice(){
    var ifrm = document.createElement('iframe');
    ifrm.id = "frameID";
    ifrm.setAttribute('src', 'http://40.85.176.227/invoke/Tier1ICLStd_New.Price/getPrice?CloudName=Azure East');
    ifrm.setAttribute('align', 'right');
    ifrm.style.margin = "auto";
    ifrm.scrolling = "no";
    ifrm.style.border = "0";
    ifrm.style.margin = "0";

    if(document.getElementById("frameID") == null){
        document.body.appendChild(ifrm);
    } else {
        alert("Else"); // I am getting control till here but what code to replace the existing iframe.
        
        //var item = document.getElementById("frameID").childNodes[0];
        item.replaceChild(ifrm, item.childNodes[0]);
        alert("test");
  
        document.body.appendChild(ifrm);

        //ifrm.parentNode.replaceChild(ifrm, ifrm);
    }
} 

Answer №1

To make changes to the content within an iframe, you can simply utilize the following JavaScript function:

function updateIframeContent(newSrc) {
    document.getElementById("frameID").src = newSrc;
}

UPDATE : Here is an example with HTML code included to provide a more detailed explanation in response to a comment.

<div class="frameClass">
    <iframe id="frameID" width="100%" height="1080" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0"
        src="http://svn.min.not/metasite/trunk/docs/README.md">
    </iframe>
</div>

Answer №2

Creating an iframe dynamically:

var counter = 0;

var newIframe  = document.createElement('iframe');
newIframe.id = "dynamicFrame";
newIframe.setAttribute('align', 'right');
newIframe.style.display="none";

document.body.appendChild(newIframe);

function fetchPrice(){
    newIframe.setAttribute('src', 'http://40.85.176.227/invoke/Tier1ICLStd_New.Price/getPrice?CloudName=Azure East&token=' + counter);
    newIframe.style.display = "inline";
    counter++;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the flex item spans the entire width of the page

I'm struggling to make my audio-player resize properly to fit the full width of my page. I can't seem to figure out what I'm missing or doing wrong... (Current Look) https://i.sstatic.net/tEtqA.png I'm attempting to utilize HTML cust ...

SOLVING the issue of page flicker in SVELTE

Within the application below, I am experiencing a peculiar page flicker effect that is often associated with AJAX requests. However, in this scenario, the cause is not AJAX-related but rather a conditional statement that triggers the rendering of different ...

AngularJS UI Router: Best Practices for Including the Controller Script

I have created a basic AngularJS single page application that uses UI Router to navigate between two views. When the user clicks on the Home link, they should see a line of text. Similarly, clicking on the About link should display some text as well, but i ...

Using ReactJs to merge multiple style objects in an immutable way

My inline style object looks like this: const simpleCarousel = { toggle: { .... }, toggle_prev: { left: 0 }, toggle_next: { right: 0 } }; Here is the standard CSS markup I am working with: <div className="toggle, toggle_ ...

The beforeunload event only triggers when the page is refreshed, not when the page is exited

I am currently utilizing the react-admin framework (version 3.2) and I am attempting to trigger the beforeunload event when a user is moving away from the Edit form view. For instance, if my pathname is "feed/123", I want the beforeunload event t ...

The Stepper StepIconComponent prop in MUI is experiencing issues when trying to render styles from the styles object, leading to crashes in the app

Struggling to find a way to apply the styles for the stepper component without using inline styles. I attempted to replicate Material UI's demo, but encountered an error. The code from Material UI's demo that I want to mimic is shown below: http ...

unable to connect a value with the radio button

I am struggling to incorporate a radio group within a list of items. I am facing difficulty in setting the radio button as checked based on the value provided. Can anyone provide me with some guidance? Here is the HTML code snippet: <div *ngFor=" ...

What are the best practices for managing mouse events in AlpineJS when working with my menu?

I'm currently tackling the challenge of developing a mega dropdown menu feature using alpine.js and Tailwind CSS. Unfortunately, I've hit a roadblock as I can't seem to get the mouse events functioning correctly. In the snippet below, you&ap ...

ASP.Net & Ajax Fusion Login Interface

I am encountering an issue while creating a login page with HTML, AJAX, and ASP.NET. The data is being passed to the AJAX function successfully, but when I debug the ASP page, the username and password are showing up as NULL. The purpose of the code is to ...

Capture an image from the webcam without any manual intervention and store it in the system's directories

Looking to automate the process of capturing a picture from a webcam once access is granted, and then saving it without any user intervention. I've managed to capture the image but struggling with: A) Automating the capture process B) Saving the ca ...

My Javascript code is being modified by Wordpress to include '<p>' tags

Using the philantrophy theme, I incorporated sliders into a page using shortcodes and encountered an issue where p tags were automatically inserted into my javascript code. The following code snippet highlights the unwanted p tag added in my javascript: ...

Error: The function authClient.request is not recognized in Node.js with googleapis

I am currently utilizing googleapis and google auth for managing events on Google Calendar. While I was able to successfully fetch the calendar event list, encountering an error when attempting to insert a new event. The error message being thrown is: Type ...

The TypeScript error message reads: "You cannot assign type 'undefined' to type 'ReactElement'."

I'm encountering an error in my react project TypeScript error Argument of type 'ReactNode' is not compatible with parameter of type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSX ...

How to dynamically insert elements into the HTML page using Angular

When my page first loads, it looks like this <body> <div class="col-md-12" id="dataPanes"> <div class="row dataPane"> Chunk of html elements </div> </div> <div class"col-md-12 text-right"> <input type="butt ...

"Unlocking the Power of jQuery: A Guide to Accessing XML Child

I'm struggling to extract the xml in its current format. While I can easily retrieve the InventoryResponse, I am facing difficulties when trying to access the child node a:Cost. Despite conducting research, I have been unable to find a solution that w ...

Validation of hidden fields in MVC architectureUsing the MVC pattern to

Depending on the selections made in the dropdown menu, certain fields will appear and disappear on the page. For example: <section> @Html.LabelFor(model => model.AuctionTypeId) <div> @Html.DropDownList("AuctionTypeI ...

The method models.User.fromURI is unsuccessful

When I try to call models.User.fromURI as shown below: models.User.fromURI("spotify:user:" + user, function (user) { $(div).html("<b ><a style=\"color:#FFFFFF\" href=\"spotify:user:" + user.username + "\">" + us ...

Exploring options for accessing Google Maps API on iPhone without using UIWebView for processing JavaScript

I need to retrieve data from Google Maps using JavaScript, without using a webview. For example, I have two points (lat,lng) and I want to use the Google Maps API to calculate the driving distance between them. Essentially, I want to utilize the Google Ma ...

What is the mechanism behind callback interaction between two different classes?

I'm currently enrolled in a course and I'm delving into the mechanics of callbacks between two classes. To aid my understanding, I have crafted this example: function Car() { this.offer = {}; this.OfferUpdate = () => { ...

How to export HTML table information to Excel using JQuery and display a Save As dialog box

This script has been an absolute lifesaver for my web application. Huge thanks to sampopes for providing the solution on this specific thread. function exportToExcel() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6& ...