retrieve content within an iframe via ajax

I currently have an iframe set up on the server side like this:

<iframe frameborder="0" runat="server" style="width: 100%; height: 700px; background-color: #bacad3;" id="I1" name="I1" src="Page.aspx"></iframe>

and I update the content dynamically using this code :

protected void Button1_Click(object sender, EventArgs e)
{       
   I1.Attributes["src"] = "Page.aspx";
}

Now, my goal is to implement it with ajax in the following manner:

  1. When a user clicks outside of the iframe, I want to change the source without triggering a page postback.
  2. I also want to display progress inside the progressupdatepanel while the changes are being made.

To clarify, I do not want any postbacks, just loading new content inside the iframe using ajax by triggering actions outside of the iframe. For example, there could be a button on the page that, when clicked and handled by an update panel, will load new content into the iframe. Any assistance or guidance on achieving this would be greatly appreciated.

Answer №1

To prevent postback, use onClientClick and be sure to return false.

window.frames["frameName"].src = "http://example.com";
//or
document.getElementById("iframeId").src = "http://example.com";

If runat=server is being utilized, the client id may need to be used

document.getElementById("<%= iframeId.ClientID %>").src = "http://example.com";

Answer №2

After some investigation, I discovered that removing postback using this method is not feasible. It requires a proxying method similar to Google Mail (Gmail), where clicking on the inbox displays content without requiring a postback. Unfortunately, implementing this feature with the current method is not possible.

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

Unable to make a successful POST request using the JQuery $.ajax() function

I am currently working with the following HTML code: <select id="options" title="prd_name1" name="options" onblur="getpricefromselect(this);" onchange="getpricefromselect(this);"></select> along with an: <input type="text" id="prd_price" ...

The io.on connection event is being activated for each emit

Each time an event handler is triggered on my socket.io, the io.on connection function is called first. For instance, in a chat application I created, every time I send a message (emit it to all clients), it triggers the io.on connection and then proceeds ...

Scraping multiple websites using NodeJS

I have been immersing myself in learning NodeJS and experimenting with web scraping a fan wikia to extract character names and save them in a json file. I currently have an array of character names that I want to iterate through, visiting each URL in the a ...

The attempt to fetch the submitted data via the PHP URL was unsuccessful

I have a form and I've created a URL to fetch data. The data is being fetched properly, but when I try to access the URL, it shows {"error":"null"}. How can I retrieve the submitted value? I am having trouble displaying the web services as I attempt t ...

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

Ways to verify if an array contains two identical object values?

I am in search of a way to determine whether my array contains duplicate object values or not. Let's say I have the following array of objects: const array = [ { id: "id1", quantity: 3, variation: "red", ...

The simple passport.js sign-up feature is not successful as it mistakenly believes that the username is already in

Currently, I am working on setting up a basic signup feature for my Node + Express + Sequelize application using passport.js. The database is empty at the moment, and I am utilizing the passport-local strategy to extract the user's email and password ...

Encountering an "undefined" error when implementing the useReducer hook in React

I'm encountering an error when using the UseReducer hook in React. Even though I have destructured the state object, I still receive this error: const [{previousOperand,currentOperand,operation},dispatch] = useReducer(reducer,{}); return ( ...

Attempting to access a shared php/javascript library using mod_rewrite

Let's dive into a fresh perspective on a question I previously raised: I've crafted a mod_rewrite snippet that checks for the existence of JavaScript, CSS, and PHP files on the subdomain they are called from (e.g., subdomain.example.com). If the ...

Production environment experiences issues with Angular animations

In my MEAN stack application, I started with Sails.js. Everything was working smoothly during development, especially with angular-animate. However, once I changed the Sails environment to production, I encountered issues. Grunt is set up to concatenate a ...

Send the date and time information to the controller

I'm facing an issue with sending data to my controller using AJAX; it keeps returning null. Any idea why? https://i.stack.imgur.com/kyt7U.png @{ ViewBag.Title = "Index"; } <h2>Index</h2> <script src="~/Scripts/jquery-2.2.0.min.js"&g ...

Is there a way to instruct the code to select between two variables and align their values?

I have encountered a challenge while working on a unit test. The website I am testing is dynamic, causing the CSS Selector and xpath to frequently change. As a solution, I came up with the idea of using both CSS and xpath to retrieve the same text. Curren ...

Turn off the background when the automatic popup box appears

I have implemented a popup box that automatically appears after 5 seconds when the site is loaded. However, if I click outside of the popup box, it closes. I want to disable the background when the popup box is displayed. If I remove the two lines of code ...

Incorporate geographical data from a JSON file into my Google Maps application

Hey there, I'm a newbie on this forum and could really use your expertise. I've put together an html5 page with Google maps using the API key from Google (My code is shown below), it's working fine with a central marker in place and loads pe ...

Is it considered proper to initialize an empty array within the data object of a Vue.js component?

For my component, I am in need of multiple empty arrays and predefined objects. The data object structure provided below seems to be effective for my purpose. However, I am uncertain if this is the optimal pattern and whether it might lead to unforeseen co ...

Interconnected Dropdown Menus

I've implemented the cascading dropdown jQuery plugin available at https://github.com/dnasir/jquery-cascading-dropdown. In my setup, I have two dropdowns named 'Client' and 'Site'. The goal is to dynamically reduce the list of si ...

Is it possible to submit a POST method without using a form?

I am looking to create a button that functions similar to the "Follow" buttons found on social networks. The challenge I face is that I need to refresh the page when the user clicks the button, as the content of the page heavily depends on whether the user ...

Error: Unable to locate specified column in Angular Material table

I don't understand why I am encountering this error in my code: ERROR Error: Could not find column with id "continent". I thought I had added the display column part correctly, so I'm unsure why this error is happening. <div class="exa ...

Express.js restricts the number of requests to a maximum of 6

I am facing an issue with my Flask server that streams image data using the multipart/x-mixed-replace header. The Express server is set up to connect to the Flask server, receive the image data, and then deliver it to the client also utilizing the multipar ...

Warning message will appear before navigating away from the page if vee-validate is

Wondering how to create a simple confirmation prompt asking if the user really wants to leave a page that includes a basic HTML form. The HTML Form: <!DOCTYPE html> <html> <head></head> <body> <div id="app"> ...