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.
Related
I am currently trying to implement the Google Tag Manager but I run into a problem since the GTM appends the tags right before the closing tag of the body.
Whenever I have a template that needs to call a bit of code from one of the scripts in the Google Tag Manager I get an undefined error. This is obvious since it does not matter where I place my script in my view, GTM will always come after it since it appends right before the closing body tag.
Is there any way to fix this behaviour and why does Google do it like this? I understand that it helps with non-blocking but they might as well just place async attributes on the scripts and it will almost do the same?
An example I have Facebook Pixel as one of my tags in GTM and I need to be able to make a specific event call when I am loading a certain page as my view.
fbq('track', 'Search');
Ofcourse this needs a fbq instance to begin with. This leave me with only one option and that is to try and place my script in my footer which is a general template and it will get messy.
Any workaround for this behaviour?
The issue you are facing is that the Facebook library is not completely loaded when you are calling your function.
One method would be to migrate your Facebook code to GTM trigger it on all pages
and fire your specific code on dom ready
You could also use the code from below and see when the _fbq.loaded variable is set to true.
https://gist.github.com/chrisjhoughton/1dc91dd7bd95717e08d3
You would have to create trigger based on this javascript variable.
Hope this helps
I'm using a third-party commenting plugin right now, All it provides is a piece of script as follows:
<div id="uyan_frame"></div>
<script type="text/javascript"
id="UYScript"
src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async="">
</script>
As it is not a live commenting plugin, I want to add a refresh button next to it to reload it manually to see the latest comments instead of reloading the whole page.(I know Disqus is a good commenting plugin, but as we target Chinese users, I have to use the current one).
As it's a third party plugin, I don't have too much control over it. And I also think iframe is a ugly way to achieve this partly refreshing thing. So, is there any other way to achieve this? Like every time I click on the refresh button, it will erase out all the HTML element this script generated, recreate this script tag, append it to the appropriate place, and run it again?
you do not have to use iframe as it is slow. What you can do is create a div or section and give it an id or class, then create a button that when is clicked will fetch a script and append the right html contents in the div or section you've created. To make it easier to understand the code would look something like this.
<section id="content"></section>
<button id="refresher"></button>
<script>
$('#refresher').click(function(){
//Load your script like so
$.getScript('url of the script you are trying to get', function(){...})
//Load your content here
$('#content').html('Current contents will be erased and will be replaced by whatever you placed here')
//...or if you need ajax fetching
$.ajax({
url: url,
success: function(){
$('#content').html('place your content here and this will erase old content')
}
});
})
</script>
I would ask 3rd party company how to refresh comments without refreshing the whole page. They did developed this, and they must have a way to refresh it easily.
For example, UYComment.refresh(document.getElementById('comment'))
You may also find this kind of solution by looking at their javascript code if you don't want to ask them.
You can go around by not using 3rd-party provided code, i.e. ajax to replace div, refreshing iframe, etc., but, based on my experience, it always make your code little messier.
Since you tagged jQuery, I'm assuming you're using it.
Try adding a click handler to your refresh button and then use .html()
example:
$('#uyan_frame').html('');
When you call .html, it should replace the element you called it on and it should recall any scripts in the string you pass in. Just as a disclaimer, this is not tested.
I need to automate a process that involves getting data from a series of links on a website.
Greasemonkey could do the job, but I can't get the content from inside that link.
The link looks like this:
<a id="ctl00_main_gvPolite_ctl02_lbDetaliiPolita" title="Detalii polita" class="icon16 icon-detalii" href="javascript:__doPostBack('ctl00$main$gvPolite$ctl02$lbDetaliiPolita','')"></a>
This would be the important part: javascript:__doPostBack('ctl00$main$gvPolite$ctl02$lbDetaliiPolita','')
I can't find that function defined anywhere in the javascript, it's only used at various points.
A frame pops up over the website displaying the content I need. After I get it in a variable I can just send it to a script on my server for processing.
For anyone interested, I was missing an input called __VIEWSTATEENCRYPTED
It's further down the page in the source code, just include it in your $.post(); or whatever you use and it will work.
All credit goes to MaxArt for this one. Thank you!
$('<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
I am trying to change the innerHTML of a div on the page that I am loading.
This is my JavaScript code:
function redirect(titleName){
window.location = "pageToLoad.php";
document.getElementById("title").innerHTML = titleName;
}
It doesn't seem to be working, please help me!!
The execution life of a script extends only for as long as the page it is running in lives.
If you want to access the DOM of one document from a script running in another, then the other page has to hang around. This means you either have to use frames or open popups.
Neither of these is a good idea. You should rethink what you are trying to achieve and find a better approach (which will probably be "Just change the title of the page you are linking to in the source of that page").