4

Which is the correct way to load an Iframe using JQuery?

Actually I have a menu with several links and I want to load each link into The Iframe whenever user clicks on it. I am working on an ASP.NET website with my default page having this menu and Iframe both inside it.

I used Target="IframeName" but I dont want this method due to some other problem with it.

So Please tell me how to create a JQuery function to load such an Iframe. I searched for it and I Found several methods but no one seems to be working and I am struck with it , Moreover I am not able to understand which one is right.

Improve this question
2
  • What is the "some other problem" with it. The target method is correct and does not require JavaScript to work. Help if you showed the "several methods." Commented Apr 19, 2012 at 4:12
  • I know target method is correct but it would be really helpful if you could tell me some method to do it by JQuery Commented Apr 19, 2012 at 4:14

2 Answers 2

Reset to default
8

The Iframe HTML Code

<iframe id="myIframe" name="myIframe"></iframe>

jQuery 

jQuery("#myIframe").attr("src","newPage.html");

JavaScript

document.getElementById("myIframe").src = "newPage.html";

HTML link

<a href="newPage.html" target="myIframe">FOO</a>

Form submission

<form action="newPage.html" target="myIframe">
    <input type="submit" name="btnSubmit" value="clicky"/>
</form>
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Well I am using this method to call <li><asp:LinkButton rel="#fe4902" ID="LinkButton2" NavigateUrl="#" OnClientClick="Javascript:Navigate(somepage.aspx);" runat="server" CausesValidation="false">Welcome</asp:LinkButton></li> and on head section I have a function <script type="text/javascript"> function Navigate(url) { jQuery("#myIframe").attr("src","url"); } </script> what wrong I am doing now ?
You are not cancelling the click of the link. Need a return false and drop the JavaScript label. OnClientClick="Navigate('ff');return false;"
<script type="text/javascript"> function Navigate(url) { jQuery("#iframeDiv").attr("src", "url"); } </script> <li><asp:LinkButton rel="#fe4902" ID="LinkButton2" NavigateUrl="#" OnClientClick="Navigate('WelcomeScreen.aspx'); return false;" runat="server" CausesValidation="false">Welcome</asp:LinkButton></li> Now I am doing exactly this still its not working, whats wrong with it and please someone tell me how to highlight the code :(
ohh I got my mistake I was doing "url"
Thank you very much guys the whole issue is resolved...I dont know why I was not able to do the same thing with "Target method" special thanks to "epascarello" for answering my stupid questions I am not able to vote your answer, bcoz my reputation is below 15, sorry for that :(
|
0

$('#iFrameName').load('somefile.html');

This selects the iframe (you need id="iFrameName" or the like in the iframe tag) and loads a file into it. But, you can just use the target attribute on the a href.. I see you mention there are problems... what is your DOCTYPE of the html? What problems are you having with a basic a href?

Improve this answer

5 Comments

This is my DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Moreover the problem with target method is that - Whenever I send normal pages(without any scripts) to my Iframe it works fine but when I send a particular page which contains a Javascript file whose main purpose is to create an HTTP request for an API and generate response in the form of tables. Then after showing the whole result my Iframe starts behaving wierdly as it opens every link I click in a new tab instead of opening inside it
This thing works absolutely fine with Mozilla and it always loads correctly but I dont know why my Iframe loose track of src after using this Javascript. There is nothing special with this JQuery file, If it will help I can show My Javascript file too ??
yes, if the file that is loaded w/in the iframe is writing back to itself, all links inside of that file would need to target _self so that could get messy. if you can post some of your javascript or at least one example of a page that gets loaded, that might help
Why Ajax to load an iframe? weird solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.