This part of a script works fine on a normal page:
<script>
$(function() {
$(".counter").countimator();
});
</script>
But when that same page is loaded in an iframe on a page on another domain, it doesn't work.
Is there a way to get this selector/code work when the page is loaded within an iframe? I want to give people a iframe code that they can use on their personal websites to get the content of my page on their website.
Edit
I published the basic code on http://joomlaground.com/iframe_test/
The http://joomlaground.com/iframe_test/clock.php runs standalone like it should.
Then I created a very basic iframe page iframe.php which iframe the clock.php. However then the clock.php is not counting any more.
How can I fix this?
If '.counter' element is outside of the iframe you're running the internal iframe script has no access to this element as the current document and iframe are separate documents. If you'll have any questions don't hesitate to ask below.
When you move this script in an iframe then it means you are running your script in a new window.
Now in new window you are trying to access some library function:
$(".counter").countimator();
That can only be done if you have that library included in the source of that iframe.
Related
I am working on a project which i will like to collect the content of an hidden iframe and make it the html of a div each time the iframe changes state while loading so it will act like the page is redirected and downloading its contents, but the heading and footing of the page will not refresh as well.
A good example is how facebook keep their heading and footing fixed while redirected.
i have achieved collecting the iframe content to the div using onload, but the problem is that, the content will not fully download from the iframe before collected i.e images, .css files and .js files.
Here is a code i tried:
THE SCRIPT USED TO COLLECT THE CONTENT WHEN LOADED
<script type="text/javascript">
function frame_loaded(){
var content=$('#iframe_id').contents().find('#body');
$('#my_div').html(content);
}
</script>
AND THE FRAME
<iframe id="iframe_id" src="some_url.php" style="display: hidden;" onload="frame_loaded()"></iframe>
AND THE DIV
So i used setTimeout() to slow time for 1 second so the frame will load the content and execute it's scripts fully before collecting it.
Here is the code:
setTimeout(function(){
$('#my_div').html(content);
},1000);
At times the content still won't complete downloading it's content from the iframe before collected.
I don't have any idea how to listen to the iframe if it's fully loaded or listen to it's ready state.
If any one can tell me the best way to do this, it will be very appreciative because i am very new to this.
I would suggest using portholejs which will help you interact with the iframe(domain xyz.com) and you can pass messages in between the iframe(domain xyz.com ) and the page which holds it (domain abc.com).For example in your case when the iframe loads you can pass a boolean (from xyx.com )to your page(abc.com) which holds the iframe and then download the content there is working example of how it porthole works here.
Hope it helps.
kind of "stupid" but try this (i don't have your code so it's a bit "hard" for me
$(document).on('load','#iframe_id',function(){
var content = $(this).content().find('#body');
$('my_div').html(content);
})
I'm writing some diagnostic tool and trying to create chrome extension for it. What I have is a page with an iframe. The iframe contains site that is laying on diffrent domain.
What I need is a communication between those two sites. What I figured out is that I can simply add an content script to each of those documents (to iframe document and my top window document) and set a communication between them by the background script and message flow.
The problem is that I don't know what is the address of the document in the iframe right now, users can put multiple diffrent pages into iframe. Because of this I cannot add content script using manifest.json file, because I do not know what to put into matches property.
I tried to use chrome.tabs.executeScript method with allFrames flag set to true. It worked fine when the iframe document was on the same domain as top window document, but when it's on diffrent domain it does not add content script to frame document.
The problem is strange, because if I know the iframe url on design time then I can add those scripts just like that from manifest file...
How can I add content script to iframe document in such situation?
I will also tell you that I have permission to every page in my manifest.json file. It lokks like this: "permissions": ["tabs", "http://*/", "https://*/"]. Additonal obstacle is that I cannot ingerate in iframe document content, it's third-party code.
Any ideas? Thanks for any help.
Following Rob W comment the problem was the timing. I was trying to inject script into iframe before it was loaded. I've used onload event on the iframe to determine the moment when the executeScript method should be called.
Now everything works fine. Thanks Rob.
I have included JQuery on my main page which is a html page, in the main page there is an iFrame and in the iFrame I am calling another HTML page. I want to use jquery in the html page which is being called in the iFrame, is it possible to use the JQuery which is included in the main page? if it is then please let me know how?
Are the pages in the same domain? (Same origin policy.)
If so then from the iframe do parent.$(xxx) but be aware the jquery will be manipulating the top level document! Not the iframe!
If you want to manipulate the iframe do $(xxxx, $('iframe').contents()) - i.e. you set the context to the iframe, then use jQuery like usual. You would probably want to set $('iframe').contents() to a variable - and if you have more than one iframe give them an ID so jquery can find the right one.
Hopefully someone here can help me with this challenge!
I have a parent page which is the checkout page for an e-commerce site. It's run on zencart and for every order placed a table row is generated through ZenCart. I've setup an EACH function which generates an iframe for an artwork uploader for each TR (order) found. The uploader works and the correct number of instances are being generated.
I wanted to avoid an iFrame, but the uploader script I purchased will not permit me to load it directly into the zencart page template, or via AJAX (tried both). There's some kind of major resource/path situation going on when doing it this way... so I've resorted to iframes.
I'm able to call JS on file-upload-complete. At that point I'm trying to capture the name of the filename that was just uploaded and place it inside the TR. The problem I'm running into are permission error when trying to access the iframe contents.
I've tried everything I've come across on this site and many others, so believe it isn't a problem with the selectors/frame selection... Firebug is telling me that I'm getting permission errors when trying to access the iframe, yet they're both on the same domain and the src is being set by a relative path....
I'm completely lost, any suggestions would be appreciated! Thanks!
www.prothings.com/store
Add items to the cart and go to checkout.....
when you want to access main window or window.document from inside an iframe you should change the context by using window.parent
For example when you want to append some text to a div, you should do something like this
window.parent.$.('#theDiv').text('the text');
There is a bug in IE when you run the code from inside the iframe and remove the iframe in between. IE can't run the code in the fly
In this page: http://www.depositosalto.com.br/lojas.php, I have a javascript to resize a div and a iframe containing a google maps location. Happens that the javascript is executed only after the iframe is loaded. How I do to the javascript be executed first?
EDIT: The javascript is not to resize the iframe, but another div with the content with id = "conteudo".
You can calculate the proper size of the IFRAME and then generate the IFRAME tag using JavaScript. This will guarantee that your IFRAME will appear only after JS code executed.
P.S. Use tag to make sure that people who has JavaScript turned off will still see the IFRAME with Google Map.
Use the <body onload: > option. This triggers when the page is first loaded.