Click event in iframe - javascript

I'm trying to append the url of the parent page an iframe is located in based on the current url within the iframe.
This is all taking place on the same domain, so I don't think there should be any security issues.
EDIT:
My code now looks like the following:
function locator_url() {
var iframeUrl = alert(document.getElementById("dealer- locator").documentWindow.location.href);
var iframeUrlSplit = iframeUrl.split('/locator/');
window.location.hash = '#' + iframeUrlSplit[1];
};
$(document).ready(function(){
document.getElementById("dealer-locator").contentWindow.onload = locator_url();
});
Now the default src for the iframe is http://localhost/meade/locator/
The page the iframe is on is http://localhost/meade/dealerlocator/
The code works for the initial page load, the parent url is appended to localhost/meade/dealerlocator/#
However, when I click a link inside the iframe the parent url doesn't change, even though the href value in the iframe has.
The parent url should have it's hash updated to something like:
localhost/meade/dealerlocator/#results_list.php?showonly=US&tab=US&zip=&distance=10&state=&city=&name=
But that's not happening.
What am I missing?

Did you try:
document.getElementById("dealer-locator").contentWindow.onload = locator_url;

Well, if you need click events in your iframe, then you could do it this way:
Car.com
Then locator_url() gets called in the parent page. Same goes for using load events (I mean, load events that occur in the iframe context).

Related

Assigning window.parent.location.href = window.location.href

My page contains two iframes. Both iframes represents a single page applications that contain routes for different views.
E.g.
parent window (contains the iframes): http://mypage.com
iframe1: http://mypage.com/#case/1
iframe2: http://mypage.com/#register/2
Each iframe contains a button that, when clicked, should display the entire iframe content in the iframe parent's window.
Now I wanted to assign the href attribute of an iframe's location object to the iframe's parent location object:
window.parent.location.href = window.location.href;
This code is executed inside the iframe obviously. But when executing it , the iframe reloads http://mypage.com. The parent window doesn't get reloaded at all.
Somehow the parent frame didn't reload by assigning a new URL to window.parent.location.
Additionally, I had to call reload() to get the page doing an actual reload.
window.parent.location.reload();

JQuery Get Parent URL in IFrame:iframe and its parent are in Different domain

I am struggling to get parenet URL inside my iframe (ie the url showing in browser). My parent site is gslb13.aaa.com .Inside there is an iframe in which i am loading my site test.elasticbeanstalk.com (notice both are in different domain)
Onclicking smile link in gslb13.aaa.com. It will load test.elasticbeanstalk.com inside iframe.
To get the parent url I tried with
var url = (window.location != window.parent.location) ? document.referrer: document.location;
alert(url);
I am getting the parent URL in index page of test.elasticbeanstalk.com (on load).
then:
1) I clicked "Add" buttons in the test.elasticbeanstalk.com to go to next view
2) Repeated the same code in add.jspx to get the same parent URL
But unfortunately I am getting the URL of test.elasticbeanstalk.com(Not Parent URL:gslb13.aaa.com )
Can Any one suggest me a way to handle this?
use
document.referrer;
Refer This
You cannot.
The same origin security rules prohibit it.
http://en.wikipedia.org/wiki/Same-origin_policy
You need to pass the URL of the parent page with the get request, ortherwise there is no reliable way to get the "parent" url.
You would need the iframe like this:
<script type="text/javascript">
url = encodeURIComponent(document.location.href);
document.write('<iframe src="http://test.elasticbeanstalk.com/something.php?refer='+url+'"></iframe>');
</script>

select and refresh an iframe not knowing the id or name

is there a way to select and refresh an iframe, not knowing his id or name, and also doing it from inside the same iframe?
the problem is that knowing if the iframe needs to be refreshed is on a response from the server on the iframe.
so, how can i force a refresh on this iframe?
i have found ays to refresh an iframe but all of them require the id like:
document.getElementById('iframeid').src = document.getElementById('iframeid').src
or
document.getElementById('some_frame_id').contentWindow.location.reload();
also there are more than 1 iframe on the web page and they are loaded dinamicaly into a jquery tab.
i can use jquery or js
if several iframes are in the same container, and you don't know in which order they are loaded, then I don't think you can target one of them.
If there's only one per container and you know the container's id, then you can do
jQuery('iframe','#container').attr('src',url);
How do you select a single iframe element without knowing any of its identity.
The only information probably is the tagName.
To refresh iframe elements, try this:
Array.prototype.slice.call(document.querySelectorAll('iframe')).forEach(function(element){
element.src = element.src;
})
Change the selectors query as you like.
Try this
Create this function in parent window/page in which iframe will be loaded.
function reload(){
var elems = document.getElementsByTagName("iframe");
for (var i = 0; i < elems.length; i++) {
elems[i].src = elems[i].src;
}
}
Call parent.reload() from iframe to reload itself.
But this script will reload every iframe in the page because no specific id or name is available in your case.
if it is available then use,
function reload(){
var elems = document.getElementsById("iframe_id");
elems.src = elems.src;
}

Control Inner iframe's from parent

According to this answer:
Invoking JavaScript code in an iframe from the parent page
I have an iframe that loads a page that has a div with the id flash_container
<iframe src="http://www.remote.com/a.html" id="iframeID">
I placed this code on my parent page (the page that loads the iframe) but it doesn't seem to work:
document.getElementById('iframeID').contentWindow.targetFunction();
function targetFunction() {
var el = document.getElementById('flash_container');
el.style.zoom = 0.7;
el.style.MozTransform = 'scale(0.7)';
el.style.WebkitTransform = 'scale(0.7)';
}
What I'm trying to do is to zoom-out the inner page inside the iframe from the parent page.
It's impossible to say for certain what's wrong, but I have some ideas you might want to look into.
Make sure that the iframe is loaded. Trying to do something inside a frame that hasn't finished loading clearly won't work
Are you sure that you don't have cross-domain problems. You cannot manipulate the contents of a cross-domain iframe.
Actually you could, if both side (your page and the page in the iframe) agree on sharing information, you could use message passsing. See https://stackoverflow.com/a/7938270/1571709

Telling when an iframe is on a new URL

I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.
It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.
I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.
Thanks for the help!
This will be difficult to do because it is considered xss and most browsers block that.
There are most likely some workarounds involving AJAX.
First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)
If that is the case, you can do the following in the iframed.html page:
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i=0, link; link = links[i]; i++) {
link.onclick = function() {
window.parent.location.href = '#' + encodeURIComponent(this.href);
}
}
}
</script>
This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)
Obviously, you would have to have a script like this on every page that is to appear inside the iframe.
Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:
window.onload = function() {
var url = window.location.hash.substr(1);
if (url) {
document.getElementById('iframe').src = url;
}
}
I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!
You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)
Instead, can you add code to the frame's contents to have it raise an event to the container frame?
In IE, the "OnReadyStateChanged" event might give you what you want.

Categories