Javascript/Jquery open relative page in browser - javascript

I am on
www.foo.com
how to call javascript or jquery to navigate to
www.foo.com/site1
or if I am on www.foo.com/site1 to go on
www.foo.com/site1/site2

window.location.href = window.location.href + "/site1"
I suppose this would work.

to get inside site1 from outside
window.location.href="site1/";
to get inside site1/site2 if you are inside site1
window.location.href="site2/";
to get inside site1/site2 directly if you are "outside"
window.location.href="site1/site2/";
to get out of site1 if you are inside site1
window.location.href="../";
to get out of site1/site2 if you are inside site1/site2
window.location.href="../../";
to get out of site1a if you are inside site1a and into site1b (at same level)
window.location.href="../site1b/";
Of course you do not need javascript for this if you use links like GO to click.
Using just window.location=.. works too (has even broader support) and even location=.. (you can omit "window.", but I wouldn't do it for clarity and maybe compatibility)
Javascript: Setting location.href versus location
I used all paths with trailing "/", being folders, to avoid automatic redirects from "site1" to "site1/" (slightly slower).

This will trigger it
window.location.href="url/goes/here";

Related

Javascript: Forcing All Links to Goto Same URL?

i have many different links on the page and instead of changing them one by one, i want to force them all to goto the same URL using Javascript (or php if possible)
Is there a way I can define where I want all URLs to go at the top of the page? so when a user clicks any link it will goto the URL specified in javascript?
Like this?
const links=document.links;
Array.from(links).map((a)=>a.setAttribute("href","https://google.com"));
SO
SO
SO
SO
SO
seams that _blank is not working on SO but trust me: it works
Edit:
Since you may wish to spare anchors on your page starting with # you can add the following if:
const links=document.links;
Array.from(links).map((a)=> (!a.getAttribute('href').match(/^\#.*/m)) ? a.setAttribute("href","https://google.com") : false);
SO
SO
SO
SO
SO
Chapter 4
//You can Use jquery`
$('a').attr('href','your url');
//Or JAVASCRIPT
n=getElementsByTagName('a').length
for(i=0;i<n;i++){
document.getElementsByTagName("a")[i].setAttribute("href", "your URL");
}

Javascript: Text in arrays and multiple textareas

I'm trying to load a parent page into an object tag, and whilst I can get an alert to show I've got the code, I cannot get it into the <object> Any clues?
var page=parent.document.documentElement.innerHTML;
alert(page);
document.getElementById('close_skin').style.visibility="visible";
document.getElementById('show_skin').style.visibility="visible";
document.getElementById('show_skin').setAttribute("data",page);
Assuming I can get the code to appear, how can I "toggle" to a different set of styles? The parent uses ".xxx_fixed" classes, but the code in the object needs to use the ".xxx_float" classes that are also in the template CSS at top of page. (When I did it in another PERL program, it was easy just to rename the tags in the <body> from "class='xxx_fixed' " to "class='xxx_float' " (Can't do that so easily with global javascript replace as that would also rename the classes at top of code as well!)
I have just tried adding some script to the top of the var page object - which MAY work if I can get the code to appear ...
+'document.getElementById(\'icon_outer\').setAttribute(\'class\', \'icon_outer_float\')'
If you're interested as to the "why", the "fixed" keep menu / top bar fixed in one place when viewed in full screen browser, but the 'float' makes everything move in unison within the <object> "window" allowing viewer to pan around the template page like a static magnifying glass;
.menu_back_float{position:relative;top:0px;background-color:#f5eca4;min-height:520px;height:auto}
.menu_back_fixed{position:relative;top:35px;background-color:#f5eca4;min-height:550px;height:auto}
To load the parent page into an <object> element, you have to specify the URL of the page. To get the code and place it in a alert box, you can use jQuery's $.get() method (as long as you load it via a proxy domain), like this:
HTML:
// I'm just using W3Schools just to save time
<object data="http://www.w3schools.com/" width="1500" height="1200">
<embed src="http://www.w3schools.com/" width="1500" height="1200"></embed>
Your browser does not support the object tag.
</object>
JavaScript:
window.jQuery.get("http://www.yourdomain.com/?url=www.w3schools.com", function(response) {
window.alert(response);
}
For the second part of your question, you can use jQuery to change the name of the class from .xxx_fixed to .xxx_float:
function main() {
$('object').removeClass('xxx_fixed').addClass('xxx_float');
}
$(document).ready(main);
Hopefully I have answered your question correctly and thouroughly, and if I haven't, feel free to let me know so I can edit this.

Adding a parameter to the page's current URL which is parsed inside another Javascript function to position it on the page

I am working on a website where I do not have direct access to all the source files, but can add extra functions using Javascript. What I am trying to do is create a button which adds "?action=delete" to the end of whatever the page's URL is, considering that this button (well, a link formatted as a button) will load on every page on the site (hence why I can't just put the URL straight into the function). I have already got to the stage where I can produce the button and make it look as I wish it to, and in the right position, but am struggling to get the href parameter to work with any page identifying Javascript I have already found. Here is what I have so far:
$('a.wikia-button.talk').after('<div><a class="wikia-button" title="Go to normal delete page" href="???">Delete</a></div>');
The three question marks are where I don't know what to put. One obvious problem I have found in trying to get this to work is to do with quotes: single and double quotes have both already been used, and so can't be used again within the href parameter (at least, not in any way I know of). This obviously makes it hard to identify a string to add the "?action=delete" to the end of the URL, and I'm guessing is the main problem causing my function to break in all the ways I've previously tried.
Any help you could give would be most appreciated! I would also like to point out that I'm not that good with Javascript, and usually just stick to altering others' functions. However, I haven't so far found any other person with this specific Javascript nestling problem to steal their code, so I hope you can help out!
~Imamadmad
First, quotes are no problem. I am a regular user at Wikia, and I know for a fact that you don't need quotes around any parameters in the url.
Second, you have two choices here: work out the correct href parameter, or use an onclick attribute.
Choice one: we first work out the href needed:
var where = window.location.href + "?action=delete";
and then we add the button, like so:
$('a.wikia-button.talk').after('<div><a class="wikia-button" title="Go to normal delete page" href=' + where + '>Delete</a></div>');
Choice two: we delegate an onclick event to the button:
$("div").on('click', "#deleteButton", function() {
var where = window.location.href + "?action=delete";
window.location.href = where;
});
and then we add the button, like so (note the absence of an href attribute):
$('a.wikia-button.talk').after('<div><a class="wikia-button" title="Go to normal delete page" id="deleteButton">Delete</a></div>');

Change href on unload (or location.href change)

There are several links (and pieces of Javascript) throughout our site that contain /2012/responses/{pathParams...} and I now need to conditionally add to the path, if it's a webview.
if (isWebview) {
// use '/2012/responses/webview/{pathParams...}'
} else {
// use '/2012/responses/{pathParams...}'
}
I can handle the links by inspecting document.links, but I'm wondering if there's a way to handle pieces of Javascript that use window.location = '/2012/responses/...'. One method is to create a function that does the window.location change and replace the window.location statements with the function. But, is there a way to handle it as an event, so when the page is changing I could conditionally insert the /webview in the URL? Browser restrictions seem to limit the beforeunload event to only prompting the user.
I think you can't. I have 2 options for you:
Option 1:
Do a replace all to your code using ternary inline if --> i recommend that
sample:
search for:
'/2012/responses/{pathParams...}'
replace with:
'/2012/responses/'+((isWebView?)?'webview/':'')+'{pathParams...}'
Option 2:
Put the /webView conditionally on server side inside the {pathParams...} variable

Can you turn off the loading screen in Submodal?

We are using the enhanced sub-modal script (http://gabrito.com/files/subModal/) and would like to bypass the loading.html screen that comes up by default. Can this be turned off? Setting the value to "null" shows a "page not found" error before the actual page loads.
It's not hard, but the code is scattered all over the place in the Javascript source. You might want to use a more modern alternative instead (especially if you're already using a library on your site)
First of all, we strip out all instances of the gLoading variable - this means removing the setPopUpLoadingPage function and the src="'+gLoading+'" in the part where they build the HTML string to inject into the page. And finally, one last reference to gLoading exist in the hidePopWin function, to reset the iframe source back to the loading page when the modal is hidden.
Then finally we replace the line gPopFrame.src = url; in the showPopWin function with this:
if(gPopFrame.src != url){
gPopFrame.src = url;
}
To stop the iframe from reloading if it's the same source.
You can see a live demo of the new script here: http://www.jsfiddle.net/yijiang/T2u2Z/ and also grab a copy of it here: http://dl.dropbox.com/u/1722364/submodalsource.js

Categories