I'm adding the base URL tag to the document head using JS, so the relative links on the page work. But it does not take effect, and Firebug (debugging addon for Firefox) shows the <BASE /> element greyed out.. why? Does this mean Firefox cannot understand it or the syntax is incorrect?
Image http://www.freeimagehosting.net/uploads/a3122c1ddd.png
http://www.w3schools.com/TAGS/tag_base.asp
the base tag has two components href and target. Yours seems to be fine. coold you give some example of the links on which it is failing?
see http://ashita.org/StackOverflow/base_test.html for a demonstration. (my test)
Edit: see comments
function addBase(url) {
var regex = /^(https?|ftp):\/\//;
var a = Array.prototype.slice.call(document.getElementsByTagName('a'),0);
var link = Array.prototype.slice.call(document.getElementsByTagName('link'),0);
var script = Array.prototype.slice.call(document.getElementsByTagName('script'),0);
var img = Array.prototype.slice.call(document.getElementsByTagName('img'),0);
var hrefs = a.concat(link);
var srcs = img.concat(script);
var element,href,src;
for (var i=0,len=hrefs.length;i<len;++i) {
element = hrefs[i];
href = element.getAttribute("href");
if (href) {
if (!regex.test(href)) {
href = (url + "/" + href).replace("//","/"); //to handle double slash collision
element.setAttribute("href",href);
}
}
}
for (var i=0,len=srcs.length;i<len;++i) {
element = srcs[i];
src = element.getAttribute("src");
if (src) {
if (!regex.test(src)) {
src = (url + "/" + src).replace("//","/"); //to handle double slash collision
element.setAttribute("src",src);
}
}
}
}
Tested and working in firefox
Related
My site has English and Spanish versions of each page. The folder structure is identical for both, but all Spanish pages are under a /_spanish folder. For example:
/index.htm is English version
/_spanish/index.htm is Spanish version
I'd like to include a button on each page making it easy to swap languages.
The logic is:
onclick parse the full current page name
if it does not contain /_spanish/
insert /_spanish/ and go to that page e.g. go from http://example.com/index.htm to
http://example.com/_spanish/index.htm
else (it does contain /_spanish/)
remove /_spanish and go to that page e.g. go from http://example.com/_spanish/index.htm to http://example.com/index.htm
Thanks in advance for any help.
I've managed to get this working - not the most elegant, but functional.
<button style="width:100px;height:100px;" onclick="myFunction()"></button>
<script>
function myFunction() {
var host = location.hostname;
var path = location.pathname;
var n = path.indexOf('/_spanish');
var len = path.length;
if (n>-1) {
/* make the new page address without _spanish */
var newpath = path.substr(10,len-9);
var newpage = '/'.concat(newpath);
}
else {
/* make the new page address with _spanish inserted*/
var newpath = path.substr(10,len-9);
var spa = "/_spanish/";
var newpages= spa.concat(path);
/*Replace double // that will occur in sub-directories */
newpage = newpages.replace(/\/\//,"/");
}
window.location.href = newpage;
}
</script>
I have website and now making a hybrid app for it.
I get all my blog post using Jquery get method.
However the issue is that <img src="/media/image.png"> is sometime relative url and sometime an absolute url.
Everytime an absolute url breaks the image showing 404 error.
How to write Jquery function to find if src is absolute and change it to
https://www.example.com/media/image.png
I will not be able to provide any code samples I have tried since I am not a front end developer and tried whole day solving it.
Note: I need to change images present only in <div id="details"> div.
You should always use same path for all the images, but as of your case you can loop through images and append the domain, as of the use case I have added the domain in variable you can change it as per your requirement.
You can use common function or image onload to rerender but I h
Note: image will rerender once its loaded.
var imageDomain = "https://homepages.cae.wisc.edu/~ece533/";
//javascript solution
// window.onload = function() {
// var images = document.getElementsByTagName('img');
// for (var i = 0; i < images.length; i++) {
// if (images[i].getAttribute('src').indexOf(imageDomain) === -1) {
// images[i].src = imageDomain + images[i].getAttribute('src');
// }
// }
// }
//jquery solution
var b = 'https://www.example.com';
$('img[src^="/media/"]').each(function(e) {
var c = b + $(this).attr('src');
$(this).attr('src', c);
});
//best approach you are using get request
//assuming you are getting this respone from api
var bArray = ["https://www.example.com/media/image.png", "/media/image.png"]
var imgaesCorrected = bArray.map(a => {
if (a.indexOf(b) === -1) {
a = b+a;
}
return a;
});
console.log(imgaesCorrected);
img {
width: 50px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="/media/image.png">
<img src="https://www.example.com/media/image.png">
document.querySelectorAll('#details img').forEach(img => {
const src = img.getAttribute('src');
// use regex, indexOf, includes or whatever to determine you want to replace the src
if (true) {
img.setAttribute('src', 'https://www.example.com' + src);
}
});
The best would be to do this with the response html from the ajax request before inserting into the main document so as to prevent needless 404 requests made while changing the src
Without seeing how you are making your requests or what you do with the response here's a basic example using $.get()
$.get(url, function(data){
var $data = $(data);
$data.find('img[src^="/media/"]').attr('src', function(_,existing){
return 'https://www.example.com' + existing
});
$('#someContainer').append($data)'
})
You can just get all the images from an object and find/change them if they don't have absolute url.
var images = $('img');
for (var i = 0 ; i < images.length ; i++)
{
var imgSrc = images[i].attributes[0].nodeValue;
if (!imgSrc.match('^http'))
{
imgSrc = images[i].currentSrc;
console.info(imgSrc);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="/media/test.jpg">
<img src="/media/test.jpg">
<img src="https://www.example.com/media/test.jpg">
www.baxter.com source page, shows most of the href links starting with the word baxter, like this -
href="/baxter/corporate.page?">About Baxter<
So the way I can construct an absolute url from the above is by combining the base url, www.baxter.com and the relative url /baxter/corporate.page?giving me www.baxter.com/baxter/corporate.page? which results in 404, cause the actual url is www.baxter.com/corporate.page?
I know how to generally parse relative URLs in PHP but is there a way to sense and remove words from relative urls like these?
Also mouseover on About Baxter on www.baxter.com web page displays the correct url, www.baxter.com/corporate.page? at bottom left of the page - where is this coming from? can it be accessed?
Will deeply appreciate any help/pointers...
EDIT on Nov 7:
In main.js, they are removing /baxter:
var fixer = function() {
var init = function() {
var digitasFinder = /(proto)|(cms-)|(teamsite-)/
, baxterFinder = /(\/baxter\/)/
, $allAnchors = $("a")
, $allForms = $("form");
digitasFinder.test(location.host) || ($allAnchors.each(function() {
var $this = $(this)
, actualHref = $this.attr("href");
if (baxterFinder.test(actualHref)) {
var newHref = actualHref.replace(baxterFinder, "/");
$this.attr("href", newHref)
}
}
),
$allForms.each(function() {
var $this = $(this)
, actualAction = $this.attr("action");
if (baxterFinder.test(actualAction)) {
var newAction = actualAction.replace(baxterFinder, "/");
$this.attr("action", newAction)
}
}
))
}
;
return {
init: init
}
}
Looks like some JavaScript executed on page load is modifying the hrefs of the links.
You could try duplicating the effects of the JS code (ie. remove '/baxter' from the links), or for a more generic solution, you could use a headless browser to execute the JS code and then evaluate the resulting DOM. Look into the Mink project for a PHP-based solution.
I am trying to reload a parent window (same domain) with javascript from within an iframe.
window.parent.location.href = window.parent.location.href;
does not work here for some reason (no javascript errors).
I don't believe it is a problem with same origin policy, as the following works:
window.parent.location.reload();
The problem with this option is if the last request was a POST, it gets reloaded as POST.
Any ideas why the first option wouldn't work? Otherwise, is there another method that will reload the page without resubmitting any form data (e.g. perform a fresh GET request to the parent page URL)?
I have also tried:
top.frames.location.href = top.frames.location.href;
window.opener.location.href = window.opener.location.href
and various other iterations.
I tried this code:
window.location.href = window.location.href;
in an ordinary page (no frames) and it had no effect either. The browser must detect that it is the same URL being displayed and conclude that no action needs to be taken.
What you can do is add a dummy GET parameter and change it to force the browser to reload. The first load might look like this (with POST data included, not shown here of course):
http://www.example.com/page.html?a=1&b=2&dummy=32843493294348
Then to reload:
var dummy = Math.floor(Math.random() * 100000000000000);
window.parent.location.href = window.parent.location.href.replace(/dummy=[0-9]+/, "dummy=" + dummy);
Phari's answer worked for me, with a few adjustments to fit my use case:
var rdm = Math.floor(Math.random() * 100000000000000);
var url = window.parent.location.href;
if (url.indexOf("rdm") > 0) {
window.parent.location.href = url.replace(/rdm=[0-9]+/, "rdm=" + rdm);
} else {
var hsh = "";
if (url.indexOf("#") > 0) {
hash = "#" + url.split('#')[1];
url = url.split('#')[0];
}
if (url.indexOf("?") > 0) {
url = url + "&rdm=" + rdm + hsh;
} else {
url = url + "?rdm=" + rdm + hsh;
}
window.parent.location.href = url;
}
I'm sure this could be more efficient, but works ok.
I am using Jscrollpane and everything works great, except when I try to use it with an internal anchor.
It should work like the example on the official page.
But in my example it really destroys my site. The whole content is floating upwards and I can't figure it out myself.
Here is my page: http://kunden.kunstrasen.at/htmltriest/index.php?site=dieanreise&user_lang=de
and if the inner anchor is clicked: http://kunden.kunstrasen.at/htmltriest/index.php?site=dieanreise&user_lang=de#westautobahn
Anybody a clou whats going on here?
Thanks for your help.
jspane does not work with old style anchors
e.g.
<a name="anchor"></a>
instead you have to write
<a id="anchor"></a>
additionaly you have to enable
hijackInternalLinks: true;
in jScrollPane settings Object.
The hijackInternalLinks also captures links from outside the scrollpane, if you only need internal links you can add this code, like hijackInternalLinks it binds the click funktion on the a elements and calls the scrollToElement with the target:
\$(document).ready(function() {
panes = \$(".scroll");
//hijackInternalLinks: true;
panes.jScrollPane({
});
panes.each(function(i,obj){
var pane = \$(obj);
var api = pane.data('jsp');
var links = pane.find("a");
links.bind('click', function() {
var uriParts = this.href.split('#');
if (uriParts.length == 2) {
var target = '#' + uriParts[1];
try{
api.scrollToElement(target, true);
}catch(e){
alert(e);
}
return false;
}
});
});
});
but note you will always have to use the id attribute on a tags.
If you are using tinymce you can repair the code with this function
function myCustomCleanup(type, value) {
switch (type) {
case "get_from_editor_dom":
var as = value.getElementsByTagName("a");
for(var i=0; i< as.length;i++){
if (as[i].hasAttribute('name')){
var name = as[i].getAttribute('name');
as[i].setAttribute('id',name);
}
}
break;
}
return value;
}