Change iframe src from inside after setting src with jquery? - javascript

I have an iframe the source of which i'm changing via various buttons using jquery. For some reason after the iframe source is set i can't seem to change the src attribute from links within it. The content will change correctly, but not the src attribute. I need the src to change so i can look for it from the main page to do stuff there.
This is the code from the main page that i'm using to set the src:
$('#section').attr('src','music.html');
And from within the frame i've tried using regular links, window.location, etc.

Related

Iframe src keeps on changing dynamically

Hi i have an iframe in my website. The problem is the src of that site keeps changing when a person logs out from that website.
From this:
https://172.16.8.187:6060/cewolf;jsessionid=AB817C6CBF0945CBE62B91C714C0D570?img=605210234&width=900&height=250&iehack=.png
to
https://172.16.8.187:6060/cewolf;jsessionid=B6693C4BF4247CB18537274062DB3A65?img=-1673722298&width=900&height=250&iehack=.png
I mean the src would change randomly which is a problem with my iframe because the src keeps on changing in the website. Is there any script that will make my iframe src adapt automatically whenever the src changes? I need this badly for my internship. Thank you very much.

Add javascript to iframe and execute it

I'm trying to do the following. Say I have html file and it contains blank iframe within it
<iframe id="preview"></iframe>
Now I need to write a script to update content of that iframe
var preview=document.getElementById("preview");
preview.src = 'data:text/html;charset=utf-8,' + HTML_CODE_HERE;
Problem occurs when that code contains external CSS or javascript files, they just appear to not parse / execute.
How can I make iframe reload and re-run HTML parser for it's content?
Two things.
1.Why is the src of your iframe, an entire HTML page?Shouldn't you be creating an HTML page, say page1.html, and referring to that in your src?
2.You might be facing problems with external paths and CSS because the path that is given when the iframe is displayed.
3.For reloading an iframe, check this StackOverflow link.

iframe src is not changing when I click back button

<iframe id ="iframeA" name="iframeA" src="./friendList.html" frameborder="0" width="100%" height="100%"></iframe>
I have an iframe tag like this.. and When the parent frame is loaded I add some tags in this iframe body. However when I change iframe src to './letterList.html' using jquery then letterList.html will be loaded correctly and then when I click back button, iframe src is not change to original './friendList.html'(even the focus was in the iframe) , But the content in iframe was './friendList.html' 's content. only src was not changed. and of course the tags that I added in iframe body was gone. I understand that tags were gone, but I can't understand why src is not changed but the contents in iframe is the original iframes'content.
Anybody can help me?.....
Not sure how you mean 'why'. This is not error, this is specified behaviour (look at the note right before name attribute description). This was probably done because iframes sometimes should be unable to interact with parent document at all.
However, if you want to handle that, you might for example catch onbeforeunload event in iframe and reset its src.

IFRAME not loading in parent frame when called from HTML page

We have 1 IFRAME present in asp page. And 1 HTML page where we have redirected to the parent IFRAME on click of anchor tag using angular.js.
In HTML page we have code as given below present inside anchor tag,
ng-click="seeDetail(); "> Go to parent Iframe
In javascript function seeDetail() we have code as shown below,
var url = "./PageToBeLoaded.asp";
parent.document.getElementsByTagName("IFRAME").item("frameID").src = url;
On call of this statement in javascript we need the URL to launch in parent IFRAME.However instead of loading in the parent IFRAME its loading in the HTML page itself.
Yes it is. You're looking in the parent, finding the iframe, and setting the src of it, which is probably the current iframe. I think what you're looking for is parent.location.assign(url).
We used ng-href tag with target attribute and it worked fine. Provided the URL to the ng-href and the frame name to the target attribute.

Is it possible to run javascript before images begin loading?

I'd like to change the src attribute of images before they are requested by the browser, the aim being to reduce the size of the images using a PHP script like Timthumb. Using jQuery, I thought $(document).ready would do the trick:
$(document).ready(function () {
var imgs = $('#container img');
jQuery.each(imgs, function() {
$(this).replaceWith('<img src="timthumb/timthumb.php?src=' + $(this).attr('src') + '&w=200" />');
});
});
But the original, unresized image is still downloaded in the background to the browser's cache. Is it possible to do what I'm trying to do on the client side, or is server-side the only option?
Javascript loading and execution is serialized by the browser (unless you use something like head.js), but the problem is that the DOM has to be available for a script to modify it. The jQuery ready event fires after the DOM is available, so the browser has already started requesting the resources that were referenced in the HTML.
So if you put the Javascript before the image tag it won't be able to find the image tags, and once ready fires the download has already started. I'm not aware of any events that fire before image load (just one for aborts), so the cleanest method is to create the HTML with the modified src attributes in the first place.
Alternatively, put the src in a different attribute on the image (like data_orig_src) and run the script to set src to data_orig_src on each image upon document ready. Use CSS to hide the images before changing the src so the user doesn't see a broken image icon. I think this is probably better than adding the images after the fact because you won't need to track where the images need to be placed in the DOM, and it should perform better as well.
Of course if you can change the server to use data_orig_src instead of src, why not just put the proper src in the tag in the first place...
You cannot change the DOM of the page before the DOM has been loaded. And, once the DOM has been loaded, the browser has already started requesting images. So, you cannot change <img> tags before they start loading their images.
What you could do is change the source of the page to not have any of the images you want to change in the source of the page and then use javascript to dynamically insert the desired images after the page has been loaded. This way the browser will never request the wrong images.
Or, you could change the <img> tags to not have a .src property at all and with your Javascript you would add the .src property. An <img> tag with no .src property will not display until you provide it with a .src property.
If you're worried about the wrong images flashing as they are loaded before you change them to the correct images, you can use CSS in a stylesheet to hide the images initially and then after you change the img.src to the correct value and that new .src value has loaded, you can make them visible.
If you can't change the source of the page, then all you can do is hide the images initially (using CSS) until the correct .src has been set on them and that new .src value has been loaded.
It is sort of possible but not in the way you currently have or probably want and it doesn't degrade gracefully but you can take the image out of your html and use jQuery to insert it into your html and apply whatever changes you want to it.
Example:
var image = $('<img />').attr('src', 'imageURL.jpg');
image.appendTo('domElement');
But doing it like this it doesn't make any sense to me as to why you wouldn't just edit the image source anyway.

Categories

Resources