I'm working on this code .. and works in all browsers, except in chrome.
I want to show a div(A) 1 time per IP every 24 hours. After displaying that div(A), I want to show another div(B) every time that ip visit my page.
This is my code
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/raw/master/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if( $.cookie('showOnlyOne') ){
//it is still within the day
//hide the div
$('#showOnlyOnceADay').hide();
$('#showothertimes').show();
} else {
//either cookie already expired, or user never visit the site
//create the cookie
$.cookie('showOnlyOne', 'showOnlyOne', { expires: 1 });
//and display the div
$('#showOnlyOnceADay').show();
$('#showothertimes').hide();
}
});
</script>
</head>
<body>
<div id="showOnlyOnceADay">
Div(A)
</div>
<div id="showothertimes">
Div(B)
</div>
</body>
In Chrome shows the two div at the same time always. What's the problem? Thank you!
You are linking to the raw version of the javascript file on github. This is not being served with the correct MIME type, so you'll need to download it and serve it yourself. Github raw is not a CDN.
Are you developing this on your local machine? If so, Chrome does not accept cookies over the file protocol. You can either enable them by starting Chrome with a flag, or test it over HTTP using a web server somewhere. More information can be found here:
https://github.com/carhartl/jquery-cookie/issues/231
Also, just to point out that technically your code will not be working by IP address as cookies are stored per machine and per browser as well as easily cleared and circumvented. Aside from this, your markup for both divs is all still available in the source and could be easily viewed with dev tools. If security (or rather the enforceability of your rule) is a concern you should think about moving the cookie code to the server side and only writing the appropriate div to the browser.
Related
I have an HTML page that contains a button says "Open Popup". Once this button is clicked, a popup window opens (using window.open).
The new popup window is an HTML page that contains a simple input filed and a submit button. Once the submit button is clicked, the popup window should close, and the text that's just been typed in the input field should now be displayed in the parent window.
I've tried doing it using opener.document.getElementById. It works perfectly in Firefox, but not in Chrome.
This is the code of my parent page (parent.html):
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="openPopup()">Open Popup</button>
<p id="result"></p>
<script type="text/javascript">
function openPopup() {
var popupWindow = window.open('popup.html', '', 'width=300, height=200');
}
</script>
</body>
</html>
And this is the code of my popup (popup.html):
<!DOCTYPE html>
<html>
<body>
<input type="text" id="userText" placeholder="Please enter some text">
<button type="button" onclick="submitText()">Submit!</button>
<script type="text/javascript">
function submitText() {
opener.document.getElementById('result').innerHTML = 'The text you\'ve entered is: ' + document.getElementById('userText').value;
self.close();
}
</script>
</body>
</html>
Note: Both parent and popup files are located in my desktop.
As mention, it works in Firefox, but not in Chrome. When I click the "Submit!" button in Chrome, nothing happens, and the following error shows up in the console:
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
I spent hours trying to find help online, but I still can't make Chrome pass data from popup window to parent page (which both are, as mentioned, located in my desktop, i.e. in the same directory).
Thanks in advance.
What you are encountering is a security feature of Chrome that is applying a web security standard called CORS (Cross-Origin Request Specification). It's meant to prevent one website from accessing another (because this is a common technique to try and trick people into giving up personal information), unless both the pages originate from the same domain. For example, http://domainA.com shouldn't be able to communicate with http://domainB.com by default. In situations were this is a legitimate need, server configuration is required to allow it.
Because you are running your tests from your desktop (without a web server) no domain information is present and Chrome thinks you are making a Cross-Origin Request.
If you run your files from a web server (over http or https), it will work.
There are many free web servers available for you to set up on your local machine and many development tools incorporate their own web servers. For example, VS code and Visual Studio are both free and have web servers included.
Using the following code to generate a pop-up with no URL bar
<head>
<title></title>
<script type="text/javascript">
function open_on_entrance() {
window.open('http://address.com', 'popsearch', 'resizable,dependent,status,width=1100,height=700,left=10,top=10')
}
</script>
</head>
<body onload="open_on_entrance()">
Here's the crazy part - the code works when I run it on my model server, but the URL displays when the same code runs on the production server. This is when testing it from the same browser on a separate server.
I know some browsers don't allow the location=no tag, but is there a setting on a server that would disallow it?
Your code works. However check the following things.
You have cleared your browser cache.
Your browser has blocked
pop-ups.
The server does not affect the result of the code.
You didn't say which browser, but there's a funny setting in Internet Explorer which forces the URL bar to always show. Make sure this is set to enabled!
IE 11/
Tools /
Internet options /
Security /
(pick the right zone for your site, usually trusted) /
Custom Level Under "Miscellaneous" /
Under "Allow websites to open windows without address or status bars" /
Set to enabled
I am beginning work on a web app that involves text-to-speech. Using a technique learned from youtube user Wes Bos, my code passes a random number through Google's english text-to-speech API (literally pasting it into the URL and returning the audio) each time a button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SujiQ Dev.0</title>
</head>
<body>
<!--text display/button -->
<p>generate random number</p>
<div id="output1"></div>
<button id="btn1" onclick="outText()">Random number</button>
<!--Hidden audio player -->
<audio src="" class="speech" hidden></audio>
<!--jQuery lib-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--read number out loud each button click -->
<script>
/*displays random number-of-the-moment; called on button click */
function outText() {
var randNum = Math.round(Math.exp(Math.random()*Math.log(10000000-0+1))); /*that's more like it*/
document.getElementById("output1").innerHTML = randNum;
/* play audio of random number */
$(function(){
$("button#btn1").on("click",function(e){
e.preventDefault();
var url = "https://translate.google.com/translate_tts?ie=UTF-8&q=" + randNum + "&tl=en";
$(".speech").attr("src", url).get(0).play();
});
});
}
</script>
</body>
</html>
This code executes swimmingly without fail when run locally on my browser, but when hosting the exact same code on my godaddy provided site, the random number generator works but access to google's speech API almost always fails, returning a network console error along the lines of: "GET https://translate.google.com/translate_tts?ie=UTF-8&q=152&tl=en 404 (Not Found)". Interestingly, once in a very blue moon, it goes through and reads the number out loud.
What gives? I've looked around but I'm stumped.
[[Edit]]
The code also fails to read the number out loud when run as a Stack Overflow snippet
This is a paid API. Youll need to set up your project on the Google developer console then youll have to input your CC billing info. Once thats done, turn on the API under the APIs tab.
Then go to "Credentials". On the right hand side, click "Edit Settings", in the provided box, add the url to your domain where the file will be hosted like "http://mywebsite.com". Dont put the full address to the file like "http://mywebsite.com/mypage.html". Save your changes.
As for why your file works when run locally, below are the addresses to my test files:
local file, run on a mac
file:///Volumes/Macintosh%20HD/Users/DoDSoftware/Desktop/soundTest.html
local file, run on a PC
file:///C:/Users/Flights%20Trainer/Desktop/soundTest.html
hosted file
http://affordable-glass.com/test/soundTest.html
You see the file:/// in front of the local files? I'd guess that Google has the API set up to allow all origins coming from file:/// as they know those will be local files and not hosted files. This way, developers can test the api and create their apps before committing to a payment plan with them. But the of course they block any request originating from a hosted site that's not on a paid program with them.
First I'm apologizing if the title of my question is not correct or not clear. But I will explain my issue below.
Lets say I have a web application called mywebapp.com and i have a page loadjs.php. Here, I have some JS code and the content time of the file is application/javascript.
loadjs.php (mywebapp.com)
header("content-type: application/javascript")
echo "alert('some message here');";
I will use the above file in a page (index.html) of another web app as a javascript source. let's say that it is anotherwebapp.com.
index.html (anotherwebapp.com)
<html>
<head>
<script type="text/javascript" src="//mywebapp.com/loadjs.php"></script>
</head>
<body>
Some contenct here..
</body>
</html>
When this runs, there should be javascript alert as I wrote in loadjs.php (mywebapp.com).
Note:
The above is working without any issue.
My Issue:
Lets assume now I want to display this alret only for the logged in users for mywebapp.com. That means, when a user who has logged in already in mywebapp.com will see an alert when they visit anotherwebapp.com in the same browser.
So my loadjs.php file will be as below.
header("content-type: application/javascript")
if(isset($_SESSION['logged_in']) && $_SESSION['logged_in']==true)
echo "alert('some message here');";
Let's assume that $_SESSION['logged_in'] has been already set after the user login.
It was working properly in Firefox and and IE. But..
Chrome browser was not working properly.
So the reason is, chrome cannot read the session value as other browsers do.
Is there any special reason for this and is there any way to overcome this?
(Please note that the above coding sample is just an example to explain my issue.)
Looking forward to hear from you.
Session is handled server-side, so this is not a Chrome problem.
It could be a caching problem: the js file is first loaded without the alert (because the user is not logged in) but when the user logs in the js is loaded from cache and not downloaded again causing the alert to not display.
Chrome has a pretty "aggressive" caching policy, had some troubles like this before.
You should try to add a timestamp or some kind of dummy value like so that on every page reload you force the javascript file to be downloaded again
<head>
<script type="text/javascript" src="//mywebapp.com/loadjs.php?dummy=
<? echo time() ?>"></script>
</head>
I haven't been using php for quite some time so this might not work but you should get the idea
This is an interesting issue. I do not have an environment to test this right now, but the first thing I would like to do is to print the $_SESSION['logged_in'] while making a request using FF, then Chrome. If for Chrome the value is false, you have to debug why. It could be a crossdomain policy issue.
You can take a look at this: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
Maybe you need to send this header from mywebapp.com:
Access-Control-Allow-Origin: http://anotherwebapp.com
Please also share if the js console of Chrome shows any error.
Update: the issue was due to chrome browser cookie settings dialed in to be restrictive. Go to chrome://settings/content and make sure Block third-party cookies and site data is not checked.
I had a similar issue.
The reason for your problem is:
The session ID is sent as a cookie, and since your request is cross-domain, it's considered a third party cookie by the browser. Several browsers will block third-party cookies.
The solution to your problem is
Generate the session ID on the client (in the browser), use Javascript sessionStorage to store the session ID then send the session ID with each request to the server.
Details in this article (related to XMLHttpRequest, but your issue is essentially the same): Javascript Cross-Domain Request With Session
I save this file as test.html and when I opened this file in IE, I am getting Information Bar for ActiveX Controls, Is there any way we can disable this thing using javascript code or jQuery code?
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{
window.location = "http://www.google.com/"
}
else
{
window.location = "http://www.yahoo.com/"
}
</script>
</body>
</html>
And I just wanted to make sure, as I am running locally on my box so that is the reason it is showing ActiveX control Information bar? And Once I upload this file to a remote server and access it from there then this active x bar will not appear??
But is there any way programmatically to disable this information bar? Any suggestions will be appreciated.
Use Mark of the Web (MOTW). We can disable the ActiveX controls warning by putting following code before the opening html tag:
<!-- saved from url=(0014)about:internet -->
<html>
<body>
......
</body>
</html>
The above code is call “Mark of the Web (MOTW)”, this is a feature of Windows Internet Explorer that enhances security by enabling Internet Explorer to force Web pages to run in the security zone of the location the page was saved from
The Information Bar you're seeing is unrelated to ActiveX (even though it might say "ActiveX"). It's simply telling you that a IE isn't running scripts on a local file, a security precaution.
Yes, when accessed via HTTP, the warning won't appear.
There's no way to programmatic disable it because (1) your code isn't running in the first place; and (2) doing so would circumvent the security restriction that this is meant to be. Use the MOTW.
If you just want pages to work on your machine, go to Tools, Internet Options, Advanced, and check Allow active content to run in files on My Computer. I'd only enable this option while developing, however.