In my Drupal 7 site I have a view with two block displays. The only difference between both is one filter criteria -URL Aias-: one block shows content with "/html5" in its alias and the other shows "/flash" url aliased content
Those blocks must be dispalyed only on certains pages. This logic is controlled by Context module based on the URL. In this way, the block will be showed if the URL is like "perm/type/man/*"
At this URL I need to display one block or another depending on flash content is enabled or not at device level: if device support flash (like PC) the flash content must be dislayed. If device doesn't support flash (mobile), the html5 content will be shown.
I found this js code to detect if flash is enabled on the device
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (fo) {
hasFlash = true;
}
} catch (e) {
if (navigator.mimeTypes
&& navigator.mimeTypes['application/x-shockwave-flash'] != undefined
&& navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
hasFlash = true;
}
}
but I don't know what to do with it nor where I must include the code.
Can you help me?
You may try to add the above code into a file or as an inline script with drupal_add_js and continue as follows:
Load both blocks on the same page initialy hidden and show the one that meets your conditions in the js.
Or load the correct block's content with ajax and dump it into the DOM based on your desired criteria.
Related
I'm using a bookmarklet to inject javascript into a webpage. I am trying to login into my gmail account(that part works) and in my gmail account automatically click Sent folder as the page loads. This is the starting page:
This is the code I am using in bookmarklet:
javascript:
document.getElementById('Email').value='myEmail#gmail.com';
document.getElementById('next').click();
setTimeout(function(){
document.getElementById('Passwd').value='myPassword';
document.getElementById('signIn').click();},1000);
setTimeout(function(){
document.getElementsByClassName("J-Ke n0 aBU")[0].click();
},6000);
J-Ke n0 aBU is the class of Sent folder. This code logins into my account, but it doesn't click Sent folder.
I noticed similar behavior on other websites; whenever a new page loads or refreshes, the bookmarklet stops working.
Why is that and what is the correct way of using the same bookmarklet on different page than it was originally clicked.
Disclaimer: I don't have gmail, so I didn't test this for gmail specifically.
This answer exists to address your comment:
What about iframes. Is theoretically possible to use gmail login in an iframe and therefore when the iframe changes to another page this doesnt have effect on the bookmarklet?
Yes, it is technically possible to have a persistent bookmarklet using iframes (or, deity forbid, a frameset).
As long as your parent window (and it's containing iframe) remain on the same domain, it should work according to cross-domain spec.
It is however possible (depending on used method) to (un-)intentionally 'counter-act' this (which, depending on used counter-action, can still be circumvented, etc..).
Navigate to website, then execute bookmarklet which:
Creates iframe.
Sets onload-handler to iframe.
Replaces current web-page content with iframe (to window's full width and height).
Set iframe's source to current url (reloading the currently open page in your injected iframe).
Then the iframe's onload-handler's job is to detect (using url/title/page-content) what page is loaded and which (if any) actions should be taken.
Example (minify (strip comments and unneeded whitespace) using Dean Edward's Packer v3):
javascript:(function(P){
var D=document
, B=D.createElement('body')
, F=D.createElement('iframe')
; //end vars
F.onload=function(){
var w=this.contentWindow //frame window
, d=w.document //frame window document
; //end vars
//BONUS: update address-bar and title.
//Use location.href instead of document.URL to include hash in FF, see https://stackoverflow.com/questions/1034621/get-current-url-in-web-browser
history.replaceState({}, D.title=d.title, w.location.href );
P(w, d); //execute handler
};
D.body.parentNode.replaceChild(B, D.body); //replace body with empty body
B.parentNode.style.cssText= B.style.cssText= (
F.style.cssText= 'width:100%;height:100%;margin:0;padding:0;border:0;'
) + 'overflow:hidden;' ; //set styles for html, body and iframe
//B.appendChild(F).src=D.URL; //doesn't work in FF if parent url === iframe url
//B.appendChild(F).setAttribute('src', D.URL); //doesn't work in FF if parent url === iframe url
B.appendChild(F).contentWindow.location.replace(D.URL); //works in FF
}(function(W, D){ //payload function. W=frame window, D=frame window document
alert('loaded');
// perform tests on D.title, W.location.href, page content, etc.
// and perform tasks accordingly
}));
Note: one of the obvious methods to minify further is to utilize bracket-access with string-variables for things like createElement, contentWindow, etc.
Here is an example function-body for the payload-function (from above bookmarklet) to be used on http://www.w3schools.com (sorry, I couldn't quickly think of another target):
var tmp;
if(D.title==='W3Schools Online Web Tutorials'){
//scroll colorpicker into view and click it after 1 sec
tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;
tmp.focus();
tmp.scrollIntoView();
W.setTimeout(function(){tmp.click()},1000);
return;
}
if(D.title==='HTML Color Picker'){
//type color in input and click update color button 'ok'
tmp=D.getElementById('entercolorDIV');
tmp.scrollIntoView();
tmp.querySelector('input').value='yellow';
tmp.querySelector('button').click();
//click 5 colors with 3 sec interval
tmp=D.getElementsByTagName('area');
tmp[0].parentNode.parentNode.scrollIntoView();
W.setTimeout(function(){tmp[120].click()},3000);
W.setTimeout(function(){tmp[48].click()},6000);
W.setTimeout(function(){tmp[92].click()},9000);
W.setTimeout(function(){tmp[31].click()},12000);
W.setTimeout(function(){tmp[126].click()},15000);
return;
}
above example (inside bookmarklet) minified:
javascript:(function(P){var D=document,B=D.createElement('body'),F=D.createElement('iframe');F.onload=function(){var w=this.contentWindow,d=w.document;history.replaceState({},D.title=d.title,w.location.href);P(w,d)};D.body.parentNode.replaceChild(B,D.body);B.parentNode.style.cssText=B.style.cssText=(F.style.cssText='width:100%;height:100%;margin:0;padding:0;border:0;')+'overflow:hidden;';B.appendChild(F).contentWindow.location.replace(D.URL)}(function(W,D){var tmp;if(D.title==='W3Schools Online Web Tutorials'){tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;tmp.focus();tmp.scrollIntoView();W.setTimeout(function(){tmp.click()},1000);return}if(D.title==='HTML Color Picker'){tmp=D.getElementById('entercolorDIV');tmp.scrollIntoView();tmp.querySelector('input').value='yellow';tmp.querySelector('button').click();tmp=D.getElementsByTagName('area');tmp[0].parentNode.parentNode.scrollIntoView();W.setTimeout(function(){tmp[120].click()},3000);W.setTimeout(function(){tmp[48].click()},6000);W.setTimeout(function(){tmp[92].click()},9000);W.setTimeout(function(){tmp[31].click()},12000);W.setTimeout(function(){tmp[126].click()},15000);return}}));
Hope this helps (you get started)!
As JavaScript is executed in the context of the current page only, it's not possible to execute JavaScript which spans over more than one page. So whenever a second page is loaded, execution of the JavaScript of the first page get's halted.
If it would be possible to execute JavaScript on two pages, an attacker could send you to another page, read your personal information there and send it to another server in his control with AJAX (e.g. your mails).
A solution for your issue would be to use Selenium IDE for Firefox (direct link to the extension). Originally designed for automated testing, it can also be used to automate your browser.
I have a website which has all pages contents in one page called "pagecontents". When a menu in navbar is clicked the jQuery load function is triggered and the relevant content is loaded into the main page.
It's working fine, however I added an hash to the URL for whenever a particular content is loaded , so that users can go directly into viewing relevant content when they type or paste the url with the hash. This works fine in my local host but not on remote host I wonder What's the problem.
if(location.hash == '#web') {
$('#contentFetch').load('pagecontents.php #webC');
}if(location.hash == '#graphic') {
$('#contentFetch').load('pagecontents.php #graphicC');
}if(location.hash == '#mobile') {
//$('#testLocation').text("mobile Works");
$('#contentFetch').load('pagecontents.php #mobileC');
}if(location.hash == '#contact') {
$('#contentFetch').load('pagecontents.php #contactC');
}else{
$('#contentFetch').load('pagecontents.php #indexC');
}
Edit: About the hash in query string:
the website url ex: 'www.mywebsite.com/'. when i add the '#graphic' at the end: 'www.mywebsite.com/#graphic' it's not loading the content. I noticed that if keep on pressing enter even though is not loading, it then loads!!!? it seems very incosistent as it loads 1 time out of 5. I wonder if using this is reliable in real world, or is there another way of doing it? Thanks, Mike
Make sure to check the runtime versions that your host is using and that they comply with the ones you have locally.
Usually, a host will run a version of a software that is often outdated in order to accommodate older websites. (ex. running PHP 4 instead of PHP 5).
I am new to both Javascript and designing for Facebook. I am using Shortstack to create custom tabs and have created a 3 panel sub-tab application using the service. In the 3rd panel, I have 19 div's holding information. By default, I use CSS to hide these DIVs (display:none;) and have a series of links at the top of the panel that change the visibility of each DIV onclick. Only the active onclick content is visible at any time.
The tab functions properly in Firefox, Chrome, and even Safari on the Mac, but fails in all browsers on the PC, and fails differently. In IE, immediately after the swap happens an error message pops up which mentions the publisher not allowing the action in an iFrame. In Firefox the tab just goes blank with no error message.
My script is below. As I stated, I am new to coding for Facebook and working with Javascript as I am a designer and not a programmer, but am eager to learn.
Thank you in advance for your thoughts and ideas.
function showhide(layer_ref) {
var thisDiv;
// check to see if any DIVs are currently showing
var divlist = ["div1","div2","div3","div4","div5","div6","div7","div8","div9","div10","div11","div12","div13","div14","div15","div16","div17","div18","div19"];
// loop through the list of DIVs in "divlist"
for (x = 0; x < divlist.length; x++) {
thisDiv = document.getElementById(divlist[x]);
// if the DIV is showing, hide it
if (thisDiv.style.display == "block") {
thisDiv.style.display = "none";
}
}
// show the appropriate DIV
thisDiv = document.getElementById(layer_ref);
thisDiv.style.display = "block";
}
If you try to change the things in iframe that could be a problem if the iframe is loaded from different domain. It is basically security rule - you don't want to allow rogue code to change/read/write things on the page other than it's own.
To answer your question better we need to know where is changing javascript is located and what it tries to change (are those two things loaded from the same domain or not).
The script itself looks ok to me.
I am trying to run the following code, to assign user selected text in web page to a variable.
The code works fine if the web page(in which text has been selected) is within the main window, however if the text is in an iframe, then the code is unable to detect the iframe at all.
Javascript code--
var iframe_or_main= 'main';
var selection;
selection = document.getSelection();
if (!selection) //this means that user has selected text within an iframe (and not within main window)...
{
//this variable tells us that the user has selected text within an iframe...
//this is required when adding an element with translated text to web page...
iframe_or_main='iframe';
var id_of_iframe;
id_of_iframe= getIframeWithSelection(window);
console.log(" Content selected within an iframe- iframe id=" + id_of_iframe);
selection = getIFrameDocument(document.getElementById(id_of_iframe)).getSelection();
}
// return; // selection is probably in an iframe;
console.log(" Indicator - iframe or main? --" + iframe_or_main)";
console.log(" Iframe id (if applicable)=" + id_of_iframe);
Also, output when I select text in an iframe, is shown below--
Indicator - iframe or main? --main
Iframe id (if applicable)=undefined
Note that I have tried selecting text in a web page (open in iframe) that belongs to same domain as main web page. I also tried doing this with same origin policy disabled in Google Chrome- using start parameters to disable it. In both cases I am getting the same output as above.
Is there something wrong with my code? How do I fix it?
Please note that I want the code to work in Google Chrome, although if it works across other browsers that would be a plus.
You cannot access the DOM of a document by using the IFrame as the root. Use the .contentWindow property to access the window of an iframe. Also, about "ID of frame, if applicable". Your code will break when the IFrame doesn't have an ID. See the code proposal at the bottom of this answer.
if (!selection){
iframe_or_main = 'iframe';
var iframes = document.getElementsByTagName("iframe");
var test_selection;
for(var i=0; i<iframes.length; i++){
try{ //Try-catch to prevent the same-origin policy from breaking the code
if(test_selection = iframes[i].contentWindow.document.getSelection()){
id_of_frame = iframes[i].id;
selection = test_selection;
break;
}
}catch(e){}
}
console.log(" Content selected within an iframe- iframe id=" + id_of_iframe);
}
If the ID of the frame doesn't matter, use the following code:
if (!selection){
iframe_or_main = 'iframe';
var test_selection;
for(var i=0; i<frames.length; i++){
try{ //Try-catch to prevent the same-origin policy from breaking the code
if(test_selection = frames[i].document.getSelection()){
selection = test_selection;
break;
}
}catch(e){}
}
}
See also: determine the frame id/name when a user has selected text in that frame- the page has multiple frames
I am developing a custom plugin for Firefox. For one of the functions in this plugin I have a button which when clicked has to toggle hide/show for another div element. This is achieved by the means of a Javascript function. The function itself is in a file that is packaged in the plugin as well.
Since the div elements are on the browser page I am trying to get the Javascript for this function loaded into the HEAD of the page by using its chrome URL. However, it is not giving the desired result.
Below are snippets of the relevant code:
The actual Javascript that performs the toggle action. The chrome URL for this is: chrome://firefox_extension/content/togglerowz.js If I put this URL in the browser it is able to display the code below.
function toggle(doc) {
var resultBlock = doc.getElementById("RowzFFExtensionDynamicContainer");
var toggleButton = doc.getElementById("RowzFFToggle");
if (resultBlock.style.display == "block") {
resultBlock.style.display = "none";
toggleButton.value = "Maximize";
} else {
resultBlock.style.display = "block";
toggleButton.value = "Minimize";
}
}
Another Javascript that loads this into the browser HEAD. This is triggered by a window load event.
var doc = aEvent.originalTarget;
var togglerowzscript = doc.createElement("script");
togglerowzscript.type = "application/javascript";
togglerowzscript.src = "chrome://firefox_extension/content/togglerowz.js";
var headvar = doc.getElementsByTagName("head")[0];
headvar.appendChild(togglerowzscript);
When the page loads, the following contents are in the HEAD element of the page (as viewed in Firebug):
<script type="application/javascript" src="chrome://firefox_extension/content/togglerowz.js">
Filtered chrome url chrome://firefox_extension/content/togglerowz.js
</script>
When I click the button the error console says toggle is not defined.
Did you whitelist the relevant chrome package as allowing untrusted content to load parts of it? The default setting is to not allow that for various security and privacy reasons. See https://developer.mozilla.org/en/chrome_registration#contentaccessible