trying to understand some js codes from website - javascript

<script>
var _b = document.getElementsByTagName('base')[0], _bH = "http://mysite.org/";
if (_b && _b.href != _bH) _b.href = _bH;
</script>
Question:
Above code is the html output from one site, what does this mean? googled online, but did not find answer.

The <base href=...> element is used to specify the base URL against which all relative URLs (modulo #imported CSS) are resolved. So normally in <a href="foo.html"> the "foo.html" is interpreted as a file in the same directory as the current page, but a <base href="http://othersite.com/otherpath/bar"> tag could cause it to behave equivalently to <a href="http://othersite.com/otherpath/foo.html">
This script sets that base URL if there is a <base> tag, but has no effect otherwise.
This might be part of a misguided attempt to cause relative links to go to the http version of the site even when the containing page is served via https.

It finds the first <base> element on the page and sets its href property to "http://mysite.org/".

Related

when does a dynamically loaded CSS into head get executed

If already answered somewhere, I would appreciate the link I just can't find it.
I load .php pages with either
<?php include 'header.php'; ?> directly or on button/link action with
<a href="#" data-toggle="modal" role="button" data-target="#genericModal" onclick="loadModalContent(\'profil.php\',\'genericModal\')">.
Some of the loaded children need the same .css & other files as their parent, so I though I would use the following code to load
function loadStyleSheet(uri){
//jquery might not be loaded yet, so do long form
var ss = document.styleSheets;
for (var i = 0, max = ss.length; i < max; i++) {
if (ss[i].href.indexOf(uri) > -1){
return;
}
}
var styleSheet = document.createElement("link");
styleSheet.href = uri;
styleSheet.rel = "stylesheet";
styleSheet.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(styleSheet);
};
and then I have i.e. two files:
parent.php
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link....something else and more....
</head>
<body>
load in one way or another the child.php
</body>
</html>
and
child.php (no html, no head or body)
<script>
loadStyleSheet("css/bootstrap.css");
loadStyleSheet("css/child.css");
</script>
<div class="xyz">
something more here
</div>
But my question is now, how the browsers react to it. Because basically the parent already went through his <head></head> and is building the page and somewhere in the middle I tell him to load some other code and oh by the way, append a .css with javascript to his <head> (I don't have <head>s in the child files). How do browsers react to this?
I understand I probably could use loaders, but would like to avoid them for now.
I also could add all children .css into the parents, but for clarity and load on demand design would like to keep them in the children .phps
Thanks in advance!
The browser should respond to DOM changes - which would include adding a stylesheet - right away.
However, "right away" is limited because the browser runs things single-threaded, and because it needs to actually load the stylesheet (probably from a remote location).
Generally a re-render will occur when any script that modified the DOM ends. (That could mean essentially at the </script> tag for an inline script, or when the event handler returns if an event triggered the script...)
So if you were to step through with a debugger, you would see that the <link> element appears under head as soon as you execute the following line:
document.getElementsByTagName("head")[0].appendChild(styleSheet);
But the page won't have re-rendered yet.
But even when the DOM is re-rendered if the new stylesheet resource hasn't had time to load then the rendered page will not appear updated. To a user, it will appear that the stylesheet is applied at some unspecified time, no sooner than completion of the script that created the <link> element.
I would recommend to have all the css your parent and child need added at first. If you need clarity, you can split it in two files and add them both.
But if you can't perhaps you could load the style rules inside a <style> tag instead of a <link>
Of course if you put the css inside a <style> you're not taking advantage of the caching of the browser, but if you're worried about not using it, why not to load all the css in the first place
take a look at this site
I don't know if this is exactly what you're looking for, but it's a proof of concept that might work for your desired application.
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" media="none" onload="$_font_awesome_media = this; console.log($_font_awesome_media.media); $_font_awesome_media.media='all'" />
<button type="submit" onclick="$_font_awesome_media.media='none'">Send Emails</button>
The button will manipulate the media query to turn off the font-awesome.css file. You can use this technique to show the .css files you want to show inside your child modules.
Simply use the following javascript to enable it.
$_font_awesome_media.media='all'
Please take into consideration that this is probably a "hack" but, it gets the job done and in a very efficient manner. The css files will be downloaded in the background so it doesn't slow down the website from loading initially. If Javascript is disabled you will need to determine how to handle that separately.

Python: Get javascript file from href tag of html

Consider a website similar to this one:
http://a810-bisweb.nyc.gov/bisweb/COsByLocationServlet?requestid=1&allbin=3055311
As one can see, the website contains links to pdf files referenced by an href tag in the page source, e.g.:
B000114563.PDF
I would like to open the underlying file using python, effectively scraping the results.
req = urllib2.Request("link.com")
page = urllib2.urlopen(req)
soup = BeautifulSoup(page)
links = []
for link in soup.findAll('a'):
links.append(link.get("href"))
Normally I would just connect the base url with the href url to get the documents, but here, they are referenced with javascript. Hence I am not entirely sure how to access the files.
I would prefer to use urrlib2 and BeautifulSoup and not switch to Selenium to click on links. Does anyone have an idea to accomplish that? It would be greatly appreciated.
I downloaded few files and compared direct link with its name and all elements required in link you have in filename
Filename:
form_cofo_pdf_view_B000114563.PDF
Direct link:
http://a810-bisweb.nyc.gov/bisweb/CofoDocumentContentServlet
?passjobnumber=null
&cofomatadata1=cofo
&cofomatadata2=B
&cofomatadata3=000
&cofomatadata4=114000
&cofomatadata5=B000114563.PDF
So you can create direct link when you get filename from string javascript:$('form_cofo_pdf_view_B000114563.PDF').submit();
Working code: http://pastebin.com/kt72GSyYa

Google +1 button is shared across multiple subpages, but it shouldn't

we have problem that we are unable to solve and we really need help with it. We have page with a lot of subpages. It works like a blog. Each page has one video and some context. Each page also has Google +1 button. That button should give +1 to current subpage.
We have 75 subpages (so as articles) and most of them works fine with Google +1 button. But about 13 of them are broken right now and count is shared across them and main domain. We don't know when it happens.
We use exactly this code:
<div class="g-plusone" data-size="tall"></div>
<script type="text/javascript">
window.___gcfg = {lang: 'cs'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
I tried to debug it. So first as you can see, we don't use data-href attribute and also we dont use The page's <link rel="canonical" ... /> tag as it is suggested there: https://developers.google.com/+/web/+1button/#target-url
So first I debuged document.location.href and the value is correct. Then I used data-href attribute to force url. It didn't help. So I inspected iframe generated with google code and even values in iframe are correct. Button should point correct url. Even when you click button, it writes correct title, but somehow it is connected with more pages.
We think that problem could be connected with google crawling. Becouse our mainpage is redirected on last article. But we don't know that for sure.
There are 2 links of pages that shares same count, so they doesn't work correct:
http://www.jaknainternet.cz/page/1750/e-mail/
http://www.jaknainternet.cz/page/1751/socialni-site/
And the article where the button is correct:
http://www.jaknainternet.cz/page/1745/reklama-na-internetu/
EDIT 1:
Some links has correct count right now, but others not. So it seems that problem is really with some google bot that caches our pages...
Actual links that doesn't have correct G+ values (basicaly value>50 isn't correct):
http://www.jaknainternet.cz/page/1759/jak-na-prenos-velkych-souboru/
http://www.jaknainternet.cz/page/1751/socialni-site/
http://www.jaknainternet.cz/page/1739/sdileni-referenci-na-internetu/
Setting the +1 target URL
The URL that is +1'd is determined in the following order:
The button's href attribute
This attribute explicitly defines the +1 target URL.
The page's tag
If the +1 button's href attribute is not provided, Google uses the page's canonical URL. For more information on defining the canonical URL for a page, see this help article.
The URL provided by document.location.href , which is not recommended.
If none of these items are present, Google uses the URL of the page as found in the DOM. Because this URL might contain session IDs, anchors, or other parameters that are not actually part of the canonical URL, we highly recommend either setting the href attribute for the +1 button or adding a tag to your page.
Do I need to use the href attribute?
The href attribute is not required. See +1 target URL for more information https://developers.google.com/+/web/+1button/?hl=pt-br#target-url
Do all my pages need to have a rel="canonical" tag?
No, though we recommend it. If the href attribute isn't set, Google will next look for the rel="canonical" tag on the page. If that isn't found, Google will use the document.location.href. This final value can sometimes be misleading because of state variables often kept in the URL. So, using a rel="canonical" tag can help you specify the exact URL you want +1'd.

Changing the colour of an attribute in an iframe depending on parents URL

Basically, I have an iframe which loads on every page on my website. Inside this is a header with a navigation bar coded using <ul> and <li> tags. eg.
<div id="header">
<ul>
<li><a id="BtnHome" href="/home">Home</a></li>
<li><a id="BtnServices" href="/services">Services</a></li>
<li><a id="BtnProducts" href="/products">Products</a></li>
<li><a id="BtnAbout" href="/about">About Us</a></li>
<li><a id="BtnBlank" href="#">Something</a></li>
</ul>
</div>
I need to change the background colour of an <a> attribute when the header is loaded into its respective page. The closest I've got so far is by using this..
On the parent page:
<script type="text/javascript">
var URL = document.URL;
URL = URL.toUpperCase();
</script>
and in the iframe:
<script type="text/javascript">
if (URL.indexOf("/HOME") != -1) {document.getElementById("BtnHome").style.backgroundColor="#222";}
if (URL.indexOf("/SERVICES") != -1) {document.getElementById("BtnServices").style.backgroundColor="#222";}
if (URL.indexOf("/PRODUCTS") != -1) {document.getElementById("BtnProducts").style.backgroundColor="#222";}
if (URL.indexOf("/ABOUT") != -1) {document.getElementById("BtnAbout").style.backgroundColor="#222";}
</script>
The code in the iframe successfully changes the colour of the <a> attribute if the variable 'URL' is matched up and the parent page sucessfully stores document.URL into the 'URL' variable but it seems like the variable isn't accessible by the iframe.
I'm sure there is a good way of doing this but I've run out of ideas
It's worth noting that I'm trying to keep clutter to a minimum on all the parent pages (hence the use of iframes in the first place)
Thank you!
Oof, Pete, you're in for a world of hurt here. There are two possible situations you're in:
The iFrame'd page and your page are on the same domain
They are on different domains
If they're on the same domain, you should be able to access the inner frame via JavaScript, and vice-versa, by using the methods outlined here. Obnoxious, but doable.
However, if the target and parent documents are on different domains - and yes, subdomains count as different domains - you'll need to do something more aggressive and hacky. Essentially, you can't affect the inner frame except to set the URL; you can pass messages to a script in the frame by setting a URL fragment (http://www.foo.com/bar.php#fragment). A script inside the iFrame can check for URL fragments and change the CSS styles as needed. A good method for doing that can be found here, though it's very complex - good luck.
All that said, there's a very good chance that using an iFrame is the wrong thing to do. You can use jQuery's ajax() family of methods to dynamically load documents directly into your document, where CSS and JavaScript will interact with them as normal. This is much, much, much easier to deal with as well as being stylistically preferable, and standards-compliant to boot.

Javascript dynamic link issues?

There might be a duplicate of this (I've tried checking questions on creating dynamic links but they reference a static link - I want this link to be hidden from the user). On testing the following code on the ww3 site:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("<a href="www.google.com">Google</a>");
</script>
</body>
</html>
I get:
http://www.w3schools.com/jsref/%22www.google.com%22
As the link address rather than www.google.com.
How do I correct this problem? And how do I make it so the link only appears after a set time? Note, this is a simplified version of the code for readability (the dynamic link will including two floating point variables assigned at the time the script is run).
An <a> tag's href must include the protocol http://, otherwise it links to a document relative to the page the link is on:
// Print quote literals, not html entities `"`
document.write("<a href='http://www.google.com'>Google</a>");
The use cases for document.write() are often limited since it can't be used after the page has loaded without overwriting the whole thing. A lot of the time you will want to create the element after the page has already rendered. In that case, you would use document.createElement() and appendChild().
// Create the node...
var newlink = document.createElement('a');
newlink.href = 'http://www.google.com';
// Set the link's text:
newlink.innerText = "Google";
// And add it to the appropriate place in the DOM
// This just sticks it onto the <body>
// You might, for example, instead select a specific <span> or <div>
// by its id with document.getElementById()
document.body.appendChild(newlink);
By the way, w3schools is not affiliated with the W3C, and their examples are generally not recommended since they are often out of date or incomplete.
You have 2 issues:
1) You need http:// before the URL so it's: http://www.google.com
2) You don't need to use quotes in document.write, but if you want to you can do one of these 3:
document.write('Google');
document.write("<a href='http://www.google.com'>Google</a>");
document.write("<a href=http://www.google.com>Google</a>");
Use the slash "\" to escape the quote
To make the link absolute, include the "http://" at the start of the url. Write out:
<a href="http://www.google.com">
instead of
<a href="www.google.com">
The second example will be treated as a relative url, like index.html for example.

Categories

Resources