$('<script/>', {
src: '/path/to/javascript.js',
type: 'text/javascript'
}).appendTo($('#iframe').contents().find('body'));
Correct me if I'm wrong, but I think that should load the JS into the iframe. I've also tried appending to head.
The problem
javascript.js is executed, but console.debug(this) in that script returns the top frame window. I've tried to verify that the script is actually included in the iframe, but don't really know how.
Additionally, running $('a') from javascript.js returns all links in the top frame, not every link in the iframe which I'd like.
Thanks for your time!
Update: I've put together an isolated test case which you also can download. Check the console and note that this is the top frame (can be verified by the variable _TOP).
This is kind of a grey area. For this specific action using jQuery, under the hood you're using importNode or adoptNode depending on the browser. However, IE won't support either (since I last researched it).
You might want to get a reference to the document, and write the script. If memory serves me right:
$('<iframe/>')[0].contentDocument.document.write('script');
I was able to make something in the same domain iframe update:
http://jsfiddle.net/maniator/DX6bg/1/
Make sure that the two URLs are in the same domain.
(including if there is a www in from or not)
UPDATE
You can test it like this:
$(function(){
var iframe = $('#iframe').contents();
$('body', iframe).append($('<div>', {text: 'this is a test'}));
});
now if you see the text this is a test in the iframe you know it is working
Related
I am calling a new url from inside an iframe and want the new url to abandon the iframe (it can close / destroy it if necessary) and appear full screen. The complication is that i do not have control of the call to the new php file becuase it is done by a credit card payment server as a redirect.
To clrify, I have a page called order3.php whihc has an iframe in it where the credit card action takes place. At the end, I tell the credit card server that we want to now go to order4.php (but i can't tell it anything else such as script with this instruction, just the page name). As one would expenct order4.php now appears in the ifrmae within order3.php. What i want is for order4.php to declare independence as it loads and insist that it is full screen.
I am not being lazy and i have had a good look areound, but i cannot understand the posts that give a single line of javascript and say that that will work because i don't know where to put it!
I have tried this:
<script>document.location.replace('order4.php');</script>
in the header of order4.php, but needless to say it doesn't work. It does cause the iframe to disappear, which is a start, but you then get a white area where the iframe was and order3.php is still showing. Actually, the browser seems to get stuck in a loop at that point.
So in summary, what can i do to order4.php so that when it is displayed it forgets the past and just goes whole screen what ever anybody else says.
Please, be concise and tell me exctly where to put any code snippets you are kind enough to provide and please remeber that i cannot control the syntax of the call to order4.php. I'm not sure, but i think that you may need to know that i have this in my header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Thanks is advance.
[SOLVED]
Not sure if this was not picked up because it is tricky or simply beneath contempt, but here is the solution for anybody who wants it.
So Order3.php has the iframe and is the starting point. The third party server is instructed to call an intermediate page which handles the closure of the iFrame and a redirect to order4.php rather than calling order4 directly. So instead of going straight to the final target, go via a control URL within the iFrame which calls a function in the parent (the original order3.php) to close the iframe and redirect the whole window to the eventual goal, order4.
1st declare the function that you are going to call within the head of the original php, order3. I have an included .js file in my header so the code below goes in there, but you will need to enclose the code in script tags if you are going to just put it in the HTML head of order3. Thinking about it, you could probably get away without closing the iFrame and just doing the replace, but this seems to work and it gets rid of any doubt.
function breaktoorder4() {
window.frames[0].close();
location.replace("https://www.website.co.uk/order4.php");
}
Next create the intermediate php (or html) that will be called within the iFrame. I have called it breakframe.php. Here is the whole page:
<html>
<head></head>
<body onload="parent.breaktoorder4();">
</body>
</html>
Now tell the third party to point to breakframe.php rather than order4.php and hey presto, you should end up with order4 being shown in the whole window.
I have not tested this in all browsers, but it only uses very simple functions, so i can't think that there should be any problems. Hope this helps.
So I have an iframe, and I would like to be able to do something like an alert whenever a specific button in the iframe is clicked. But the following code does not work
$('.class_name').click(function(){
alert('Clicked');
});
in fact, it wont even alert when the iframe is clicked (which is the same code as above, but where .class_name becomes iframe).
I looked at the solution from this question, and it still did not work!
This is a jsfiddle that should demonstrate the issue pretty well.
So my question is: Why wont Jquery recognize when anything inside the iframe, as well as the actual iframe, is clicked?
Edit:
I understand that I cannot communicate with an iframe on a different domain, so my jsfiddle wont work...but it doesn't work on the site where I am hosting it on the same domain as the iframe...
If your iframe is coming from a different domain, as in your fiddle, then your JavaScript code has no access to its contents at all, sorry!
As #Max poins out, you can use postMessage() or the URL fragment hack to communicate with an iframe in a different domain, if there is code in that iframe to handle this communication from that side.
With an iframe from tumblr.com, you could check their documentation to see if it talks about using this page in an iframe and communicating with it across the domain barrier.
Now if you're talking about an iframe from the same domain as your page, then it's easy. Given an iframe element in a variable named myframe, you can use myframe.contentWindow to get its window object and myframe.contentWindow.document to get its document object. From there you can do the things you need. For example:
var $myframe = $('#myframe'),
myframe = $myframe[0],
myframewin = myframe.contentWindow,
myframedoc = myframewin.document;
$(myframedoc).find('a').on( 'click', function() {
alert( 'Clicked!' );
});
You may still have some trouble using a copy of jQuery in the main page to access things in the iframe, but should have better luck with the latest versions. Worst case you can use native DOM events and methods for this, but jQuery does work in this updated fiddle.
This fiddle uses document.write to put content in the iframe, but the jQuery code accessing the frame would be the same either way. The one thing to watch out for, of course, is whether the iframe has been completely loaded when you try to access it.
I think you can listen for a load event on the iframe element in the containing page, but worst case you could use setTimeout() or setInterval() and wait for the elements you're looking for to become available.
Because the iFrame is a completely different frame- it's done out of security concerns. For example, imagine if you could load a banks login page in an iFrame, and use js to get the field values.
With different domains especially, it is much harder to communicate with JS- this should get you started: How to communicate between iframe and the parent site?
As the title suggests, does anyone know how to eliminate the need for top or parent in iFrame localized scripts?
In the screenshot below, I get a "not defined" error unless I add top or parent as a prefix to my function call.
test(); does NOT work
top.test(); works OK
You must have some errors in different part of your code which you didn't post here (actually you didn't post ANY code, only meaningless screenshot of DOM inspector...). This should work just fine without top and parent.
I'm very new to javascript, so this is confusing me. All of the settings charm tutorials only show how to put the controls into the settings charm, but none of them say how to find the information gotten in them.
I tried to do one of these (like I do in the main program):
var muteToggle = document.GetElementById("Mute");
where "Mute" is the id in the separate html file.
muteToggle just ends up being null all of the time. I tried putting it after
WinJS.UI.ProcessAll().then(function completed() {...
but that didn't work either. Everything else is the same as in this page: http://msdn.microsoft.com/en-us/library/windows/apps/hh780611.aspx
Make sure you're doing it in the ready function of the js file that is referenced from your settings HTML. Try opening the JavaScript console or QuickWatch while broken at that line and also look at the DOM Explorer to see if you can find your toggle control. You should be able to access it though. Also, try element.getElementById instead of document.getElementById. Either should work actually, but as long as you're troubleshooting. Good luck.
Your problem is that you are trying to get a reference to the HTML element from the code running during the app activation. Although that piece of code may define the HTML to be loaded for a settings pane, it does Not actually load the HTML into the DOM. You just simply can't get the instance from that location.
What you need to do is have the settings flyout have its own js file that implements IPageControlMembers. In particular, you need to implement the ready method. This method is called once all the HTML and controls are loaded for the page, including your toggle. The link has an example of how to do this.
Also see:
WinJS.UI.Pages.define
Using single page navigation
So I have this js code for an image gallery:
(this.settings.update_window_hash) {
var thumb_link = this.images[this.current_index].thumb_link;
if (thumb_link.attr("id")) {
window.location.hash = "#image-"+ thumb_link.attr("id"); //#url
} else {
window.location.hash = "#image-"+ this.current_index;
};
};
So as you've probably assumed this appends $image-(int) to the url. So if I have a
gallery with multiple images if the thir image is selected the url will look like this:
mysite.com/gallery.html#image-3
All good. But I dont really like this to be appended to the end of the url. So is there
any problem if I remove this part of the script entirely? So regardless the number of
image currently selected the url will look like this:
mysite.com/gallery.html
I've tested it and it works okay. But I'm not very experienced with javascript and I want
to make sure I'm not making a mistake. So
IS IT OKAY IF I REMOVE THIS SCRIPT ENTIRELY? WILL IT CAUSE ANY PROBLEMS?
HUGE THANKS.
Hashes at the end of the URL are optional and not required so YES, you can remove that script if you want (I'm not sure what problem you're trying to solve by removing it). In general, you get more useful answers if you tell us what problem you're trying to solve rather than what solution you're trying to use.
Hashes are used when you want the URL of the page to direct the viewer to some subcontent on that page. If you remove them, your page will still work just fine, but the URL of the page will not reflect which image is displaying. So, if the viewer saves that URL and comes back to it or links to it or anything that keeps a reference to the URL, it will go to the generic version of the page, not the onethat shows a specific image. Whether that is OK is totally up to you and how your page works.
Just use:
location.replace(location.href + "#myhash");
The location.replace method overwrites the current step in browser history. For an example of this in action see http://prettydiff.com/slideshow/
The stuff after the octothorpe normally represents a "name" or "id" from the web page. You can have an anchor tag (<a name='thevalue'>) and the browser will interpret the text after the octothorpe (http://example.com#thevalue) by scrolling to the associated section on the page.
Unless the page has special JavaScript to behave differently. In your case, it depends upon the full functionality of the web page you're writing. If you have smoke tests/unit test/use case tests/other QE tests, you should execute those to ensure that your changes don't break anything.
See http://www.w3schools.com/html/html_links.asp for more description of the standard usage.