I created this script to hide a page only if chrome 18 has not been found, how can I make sure to do the redirect of the url to a external page if chrome 18 has not been found instead of hiding only the page ?
I want to do the redirect to this website http://search.aol.com/aol/webhome
<div id="hiddenContent" style="display: none;">
My hidden content.
</div>
<script>
function GetChromeVersion() {
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
return raw ? parseInt(raw[2], 10) : false;
}
if (GetChromeVersion() == 18)
document.getElementById("hiddenContent").style.display = "";
</script>
It's possible, e.g. by using:
window.location.href='http://search.aol.com/aol/webhome';
Inside your function. BUT I wouldn't recommend you this. You should never trust the client as JavaScript can easily be changed and someone could access your site even despite the JavaScript redirect if they wanted to and made a minimal effort to modify page sources. Javascript is handled on the client-side, while php is completely server-side. In this case I'd use php instead of JavaScript. Try to check it with php and if it's not chrome 18, use: header('Location: http://search.aol.com/aol/webhome');
Edit:
<?php function is_chrome()
{
return(eregi("chrome/18", $_SERVER['HTTP_USER_AGENT'])); } if(is_chrome()) { header('Location: http://www.search.aol.com/aol/webhome'); } ?>
Place it on top of the file, should work, but haven't tested it yet, if not, just change the string in eregi('chrome/18') to what you need (it's a regular expression)
Related
and thanks for taking a moment,
I have gone to the twitter site and created an embedded timeline per their instructions.
if I place the generated code on a simple html page on my desktop, all works as expected. When I place the same code inside my SPA application, i only get a 'follow me' link on the site. The SPA application is built on the John Papa example.
There are no javascript errors thrown. I'm guessing that the heart of the issue may have something to do with the routing, b/c if I navigate directly to the page where I've embedded my timeline, the code works as expected.
i.e. http://localhost:50000/App/views/shared/pillar.html
However, I also have a google calendar widget, and that works as expected.
Tested this in Chrome, FF, IE. Behavior is the same.
Any thoughts on how I might diagnose this further? Or is my approach totally wrong? I'm just looking to add the latest n-number of tweets to what is basically a blog. Nothing too fancy.
<a class="twitter-timeline" href="https://twitter.com/PoundingCode" data-widget-id="313336765203218432">Tweets by #PoundingCode</a>
<script>!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);
js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");
I figured out a solution, but rather than take this down, I hope it might help the next person:
Put the twitter widget code into a new html document.
Have that document take in a querystring called handle
Have that html document parse the querystring and inject it.
Create an iframe bound to an observable that has your twitter handle, passing in that handle as your querystring parameter.
the iFrame data-binding:
iframe data-bind="with: twitter, attr: { src: '../App/views/shared/twitter.html?handle=' + twitter() }" style="height:622px;" seamless="seamless"
The twitter page
<body>
<a class="twitter-timeline" href="https://twitter.com/" + get('handle') data-widget-id="313336765203218432" ></a>
<script>
function get(name) {
if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s); js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");</script>
</body>
The Twitter script only checks the DOM once after being loaded. An SPA changes the DOM dynamically, so you have to tell the Twitter script to scan the DOM again:
const twttr = window.twttr
twttr.widgets.load()
If the script was loaded already (usually https://platform.twitter.com/widgets.js), then the twttr object is available in the global namespace.
Here is the relevant documentation: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-loading-and-initialization
I think I've looked over 50 different examples online, but can't find the same problem.
I've got a jquery mobile site and a full site (it's a WordPress site). I've put the following code in the header.php file of the full site:
<script type="text/javascript">
function urlParam(name){
var results = new RegExp('[\\?&]' + name + '=([^amp;#]*)').exec(window.location.href);
if(results)
return results[1] || 0;
else
return '';
}
if(urlParam('view') == 'full'){
}
if(urlParam('view') == ''){
// <![CDATA[
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
document.location = "http://mysite.com/mobile/index.html";
}
// ]]>
}
</script>
This works fine and when I load the full site on my iphone it redirects to the mobile version.
However, I have a link to the full site on my mobile site like so:
<li>Full Site</li>
When I click this link it DOES take me to the full site, but if I click on any links on the full site, I get redirected back to the mobile site.
FYI, I've tried (and failed) setting cookies. All the scripts I've used haven't worked (I'm sure it's my fault) and I end up stuck in a continuous redirect.
First off, you only need the statement: if(urlParam('view') != 'full'){ check if mobile and redirect.. }
I suggest you use document.write(urlParam('view')); to check what urlParam('view') actually returns. This should make it easier for you to debug. Though the best way to debug is to use chrome or firefox tools.
I'm having an issue using Exoclick adult advertisement to advertise on a mobile website using JQuery UI.
I don't know how much I can disclose here until it goes too far into "adult" that I can't post it here anymore.
The Exoclick banners show, but only once! Navigating inside the site doesn't the same ad again (we have two ads, bottom and top. Each is only loaded ONCE per site traversal). If you refresh using the refresh function of the browser ("F5"), they will load again... But only once.
Alright, Exoclick gives me a snippet like this:
<!-- BEGIN ExoClick.com Ad Code -->
<script type="text/javascript" src="http://syndication.exoclick.com/ads.php?type=300x50&login=<username>&cat=110&search=&ad_title_color=0000cc&bgcolor=FFFFFF&border=0&border_color=000000&font=&block_keywords=&ad_text_color=000000&ad_durl_color=008000&adult=0&sub=&text_only=0&show_thumb=&idzone=<zone id>&idsite=<site id>"></script>
<noscript>Your browser does not support JavaScript. Update it for a better user experience.</noscript>
<!-- END ExoClick.com Ad Code --></div>
The thing is, this works perfectly on static sites, but due to the nature of JQuery Mobile to fetch everything using AJAX, the scripts would be loaded many times over into the browser's execution context (at least this is what I suppose happens!) and in the end... not even execute anymore?
What I already thought of:
Cache the output of the Exoclick ad script (is there something like "outputcache" for JS?)
Deactivate Ajax
I tried deactivating Ajax requests but for some reason this didn't do anything:
<script>
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
Deactivating Ajax should work:
$(document).bind("mobileinit", function () {
$.mobile.addBackBtn = false;
$.mobile.ajaxEnabled = false;
$.mobile.ajaxLinksEnabled = false;
});
On the other hand, you can refresh/reload your script on each ajax success
$('html').ajaxSuccess(function() {
//reload your script using js, plenty of that on google
});
I did it... #bobek indirectly brought me to this answer.
What I did is create an invisible div which contains the ads at first. Then, on pageinit, I steal the div and remove it from DOM. The div will now have an iframe inside made by Exoclick.
Then, without the script by exoclick, I insert it back into the dom on each page init event...
To prevent that the script gets inserted back into the dom, on the server side I check for the X-REQUESTED-WITH header. If it's XMLHttpRquest, I don't send the ads.
This is how it looks in code:
The temporary ad placement, ANYWHERE on the site:
<div id="ads">
<div style="display: none" id="topad">
<?php require("./_topbannerb.php"); ?>
</div>
<div style="display: none" id="bottomad">
<?php require("./_bottombannerb.php"); ?>
</div>
</div>
The two PHP files contain the tags by exoclick. Nothing else.
A script in the head tag:
<script>
ads = "";
first = true;
$(document).bind('pageinit', function() {
if (first) {
ads = $("#ads");
ads.remove();
}
first = false;
$.each($(".adt"), function(i, v) {
$(v).append($(ads).children("#topad").first().children("div").clone())
});
$.each($(".adb"), function(i, v) {
$(v).append($(ads).children("#bottomad").first().children("div").clone())
});
});
</script>
Then, where the ads are supposed to be placed in the end:
<div class="adt"> </div>
The script automatically inserts into each ad placement. Here I have two different ad regions: Top and bottom. Both have no differences except how exoclick handles them in the back.
The Url for my development environment is:
http://localhost/mysite/blah...
I am using jQuery & getJSON to perform some ajax actions on my site, which work fine all the time I specify the url as:
/mysite/controller/action
..but this is not ideal as I don't want to hardcode my development url into my seperate jQuery include files.
When the site goes live, it'll be fine to have controller/action or /controller/action as the url as that will resolve ok, but for the development site, it's no go.
I've tried:
controller/action
..but this returns a 404, which suprised me as I thought the lack of / at the front of the url would prevent from looking at the website root.
There must be a neat solution to this?
I would do this by inserting a global constant in my HTML header:
<script type="text/javascript">
var BASE_URL = '/mysite/';
</script>
That would be inserted from your server so it can be dynamically changed.
Later in your script, you'll be able to make AJAX requests with (jQuery style here):
$.ajax( BASE_URL + '/controller/action', ...);
If you're in
/mysite/controller/action
then the correct relative path to
/mysite/some_other_controller/some_other_action
is
../../some_other_controller/some_other/action
You can use this code to get the current path of the .js script and use it for calculate your relative path.
var url;
$("script").each(function () {
if ($(this).attr("src").indexOf("[YOUR_SCRIPT_NAME.JS]") > 0) {
url = $(this).attr("src");
url = url.substr(0, url.lastIndexOf("/"));
return false;
}
});
var final_url = url + "/your_target_script.js"
Replace YOUR_SCRIPT_NAME with the unique name of your script.
I am looking to only show a form if it is pulled on a page within an iframe. How do I do that? Is there a server side solution?
If you are using JQuery... (installation instructions here: http://jquery.com/ )
$(document).ready(function(){
if( window == window.top) { $('form#myform').hide(); }
});
Which just hides the form with id "myform" if the window is not the topmost window.
I can't think of purely serverside way, but you could use a bit of hybrid javascript/rails.
assuming that you have a dedicated iframe layout template e.g. 'layouts/iframe.erb'
you could put some javascript in the head to check if it is being loaded as an iframe, and if it is not, redirect to an action and maybe display a flash msg "can only load this page inside application"
The javascript/rails for the head
<script type="text/javascript">
function parentExists()
{
return (parent.location == window.location)? true : false;
};
function check_modal(){
if (parentExists()) {
window.location = '<%= url_for( :controller => "home", :action => 'iframe_action', :iframe_fail => 'true')%>'}
}
check_modal()
</script>
notice the param :iframe_fail which you could check for in a controller and do whatever you please if that param is present e.g. display flash msg or redirect
example controller
def iframe_action
if params[:iframe_fail]
flash[:notice] = 'can only load inside app'
else
#do something else
end
end
Not real pretty but might help you get the job done.
My iframe tag was like
%iframe{:height => "98%", :width => "98%",:"id" => "profileIframe"}
I wanted to hide header of my webpage within this iframe hence I used code as:
var $frame = $(window.parent.frames["profileIframe"]).contents();
$frame.find('.header-ui').hide();
If you observe then contents() returns a element as "#document", which is html of iframe, hence calling a javascript without this will try to access your actual webpage rendered in background of iframe.
You can only check it on the client side via JavaScript.
However: DO NOT DO THAT. There are plenty of legitimate uses of putting a site in a (i)frame. Breaking out of such iframe or changing your site in any way in such circumstances them will only make your users pissed unhappy.