I have an iframe that loads a form from another site into my site (I control both domains but they are different).
The iframe is loaded into a fancybox on my site and I would like it to popup an AJAX loading graphic when the form in the iframe is processing.
I know I can't directly add event listeners to the iframe form other site but is there any way that my site can know what is going on in the iframe?
No there's no way of knowing what another iframe is doing.
Have the domain (the one inside the iframe) load the AJAX loading graphic before the content shows up, all on the server side... you don't need the client for this.
I agree with Luca, but then your form will have to be loaded before the AJAX loading graphic can be displayed. If it is a very large form, this might take a while and will perhaps defeat the purpose of the loading graphic.
Have you considered loading the contents of the form via javascript instead, bypassing the iframe altogether? Just GET the contents of the form and load it into a div? (Granted, if the form you're loading is complex, that might cause more problems)
It is absolutely forbidden by browsers to know what is going on in the iframe.
Related
I want to know if it is possible to block JS, loaded by an iframe, from running on my Wordpress site. I currently embed iframe generated by a service I pay to use for my business. The iframe comes with Google AdSense ads embedded in it. Recently, the rogue pop-ups have been affecting my customers. Essentially, these are ads that run on the mobile version of my site and initiate a series of redirects. I can prevent these on my own device with an AdBlocker, but not all of my customers are that savvy.
I have tried to disable the Google AdSense ads a few ways: CSS display:none; (fails, as the JS is loaded even if the element is hidden with CSS), PHP (created a plugin that leverages wp_deqeue_script, targeting the google ad script files (blocks some JS, but ultimately fails to prevent every instance of the ads), and even HTML in the head section of my site, (the idea is that it prevents loading sources outside my domain, fails).
Is there a way to programmatically prevent these JS files from loading on my site?
There is not so much you can do about it. As #charietfl states in the comment you should think in the first place about not embedding this at all if that is a possibility for you.
From programming perspective there is only one reliable thing you can do: use iframe sandbox mode.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
This way you can prevent the IFRAME target from running ANY scripts - I do not know though if its a valid scenario for you. Otherwise there is actually no reliable way to affect the loaded iframe.
My object is to remove the scrollbars of an iframe for cross domain servers, which I don't have access to.
Page A has an iframe which displays contents of an external server
The content is not fixed, its height changes with time so I can not fix the height, it has to be dynamic.
It has to be handled with JavaScript. I have a list of objects corresponding to the users selection. When a different selection is made, different content types are shown.
I have tried to a solution with postMessage, but it does not solve the problem as I don't have access to the server. I was thinking more of a view, which resizes the iframe when the page is loaded.
You can't. There is no way to determine the size of a page in a cross-domain iframe without explicit support from scripts running on that page. Since you've already said that you can't modify that page, there's no way to do this.
I have a wordpress website, where I have pages with artists. This is an example: http://chasefetti.paradigmrecordsinc.com/ of a page from my website
On the top I have an iframe from arena.com
I want after the page loads to click the play button.
If I do it on the arenas page http://arena.com/artist/chasefetti like this (using firebug):
document.getElementsByClassName("fg icon-play-fg")[0].click()
it works, but on my website I guess it doesn't know about accessing the iframe.
How can I specify to access that iframe ?
Also the full mission that I gotta do is to play that button for each page. I am thinking to add a jquery that does what I want to do, to the templates page.
My main problem is accessing that element from the iframe
As far as I know(I tired it once) you can't do that, unless the source of the iframe is on the same site as yours, which isn't the case here.
Also check this same-origin policy.
Ok so any help here would be great
I have a HTML page with an I frame loading a site of mine in it…
What I need to do is check in the iframe from the main document, the target attribute of a link and if it's blank, hijack it and add my own custom functionality from outside of the iframe in the main HTML document
The issue I have is the site being loaded in to the frame is on a different domain so I am not sure if this can be done? I have full control of the site been loaded in to the I frame so is there something in there I can set to allow it?
What I effectively want to do is hijack the links in an iframe which I guess could be an issue?
Can this be done, alternately does anyone know a way I could achieve what I am trying to do?
Thanks
I'm building a PHP page that will load some off site content into a DIV. There are other static elements on the page also. The problem I'm having is that the page takes too long to load because PHP loads the off site content before displaying the page.
I am considering loading the off site content in the DIV via AJAX. I'm assuming the rest of the page would load regardless of how long it takes the AJAX DIV to load.
The content will not need to update or change while the original page is loaded. It just needs to load the content once.
I have been searching for a while and have found a lot of different techniques for doing this. Such as jQuery.
Do you have any suggestions on how to do this?
Any links to tutorials would be great.
Thanks
I guess this can help you:
$('#result').load('ajax/test.html');
Reference: jquery
If you control the second (off-site) domain, you can get around the same-origin policy issues by loading a script on the secondary domain. That script should kick off the various AJAXish content updates you want.
on example1.com:
<div id="stuff-from-example2"></div>
<script src="http://www.example2.com/js/stuff.js"></script>
in stuff.js:
$('#stuff-from-exampl2").load('http://www.example2.com/fragment.html');
You can get around the same-origin policy by loading the data using JSONP.
Here are the JQuery docs