The nature of JS Bin - jsbin

Can someone explain why awesome tools like JS Bin give errors like:
Runner: Permission denied to access property 'scrollX'
when I'm trying code like:
<button onClick="exit();">Exit</button>
<script>
function exit() {
window.location = 'http://www.youtube.com/';
}
</script>
...that work fine if they are called from a regular file in the browser?
Thanks.
Edit: Correction Firefox gives the error.

It's because the iframe that the runner (the thing that automatically generates the preview in jsbin) has sandbox'ed properties on it.
It's been set up so that the only thing that the iframe can't do is set the location of the window. This stops someone from sending a malicious bin to another user, and then suddenly redirectly elsewhere.
Similarly, sites like youtube.com prevent their content from being set in an iframe, and such you see a blank window, like this: http://responsivepx.com/?youtube.com (note that the blank window is where youtube.com is supposed to be).
I'm the primary dev on jsbin by the way, which is why I know :)

Related

In wordpress Chrome & Firefox element Inspector show View source does not, which is correct

I am trying to debug a Wordpress issue where a is being auto inserted before the end of the <script> tag, hence breaking the javascript.
If I view the element with the inspector, I can see a as shown below:
However if I viewsource, or download the html page and look at it, there is no :
});
});
setTheRepeaterButton();
});
</script></p>
At first i thought it was a chrome bug, but I get the exact same behaviour in firefox.
I would think there is no , however the script is broken which implies there is one. Which is correct, the inspector or the page source?
It looks like there is a hidden/invisible character before the final } in the script. Depending on your code editor, you can toggle a setting to view hidden characters or add a plugin (e.g. nbsp-vscode for VS Code).
Or the easiest solution is to delete the space between that } and the preceding ; and redo the code formatting.

Why iframe is not loading all webpages in winjs app?

Hi All,
I took a blank WinJS Store app and placed the below code in default.html file
<iframe src="http://www.google.com" height="400" width="400"></iframe>
But the iframe is not loading the google home page. The page is left blank. While if I replace the src value to "http://www.palermo4.com" its working fine. Why is this strange behavior. Do we need to acquire any other permissions kind of thing for some urls? Kindly help me out.
Thanks in Advance
You can't load ooogle in iframe,since they are blocking this facility.
You can use Iframe for some other sites,but you won't get full controll of their JS[Loading sites] ,may have to face some breaking point in such sites.
if you really want to load google try this,.
1. Make your default browser as IE10.
2. trigger an event.
function openYourLink(){
var url = new Windows.Foundation.Uri("http://www.google.com")
Windows.System.Launcher.launchUriAsync(url);
}
In Windows 8.1 you'll also be able to use the webview control which is not sensitive to frame-busting code that sites like Google use.

Chrome caching CSS but not loading images inside CSS file

We're having a weird problem at work that happens only in chrome. It looks like the css file is getting cached and the content of this file isn't getting re-downloaded.
The problem is that when using a fresh session for example "private session", the image "mainSprite.png" isn't getting displayed.
After some tests, I believe the problem is related to us doing redirects at the beginning if the user isn't authenticated. From what I understand, it might not complete the download of the sprites linked inside the css files. It will cache an invalid object as soon as the redirect starts and then on the following pages, it will fail to display a correct image since it cached something wrong.
The strange thing is that it actually loads the image completely at some point. But it looks like it's not refreshing it in memory...
I did a timeout of one second before starting redirects on first load and images correctly display. This is a quick fix and I can't expect every computer to load in 1 second every images contained in the css.
edit
As far as I can say, it really looks like a race condition. I changed the order of loading. We use require.js. Instead of loading js after css, I start js loading before. And images are getting loaded correctly now on my local server.
if someone is interested to look into it:
http://api.checklist.com
edit 2
When images aren't visible, opening new tabs will have the same problem. Closing the browser and reopening it will work on first load and images isn't being downloaded but loaded from Cache which means that before closing the browser, the image was indeed downloaded.
It looks like the problem coming from your redirects unfortunately i couldn't see your example ( link won't open ). Google chrome has indeed issues with caching it's annoying during development time ( clear up the cache, load new image, do the same for new image..), if you need to clear your cache try the folowing:
try to go to
chrome://chrome/settings/clearBrowserData
in your chrome browser and check the options:
Empty the Cache( i have also Clear download history and Delete cookies and other site and plug-in data )
click on 'Clear Browsing Data' button it should
All what you need to do is to trace your cash list via chrome, and from what I see is that you got this error which make it not cached:
Uncaught TypeError: Object [object Object] has no method 'placeholder'
So if you want to trace, you can use the manifest offline mode or you trace via your code.
Just following and test your page, I did catch where the error is:
file: scripts2.js Line 20 --> $('input[placeholder]').placeholder();
which you need to check the name of the place holder and change it here in this tag.
Thank you
I assume your server/backend app has routes set up. Like this Play! framework example:
# Ignore favicon requests
GET /favicon.ico 404
# Map static resources from the /app/public folder to the /public path
GET /public/ staticDir:public
# Catch all
* /{controller} {controller}.index
According your summary I suggest to set up a static folder route (where the images are) in config file or htaccess as you want, then check image url in browser url bar (with empty session). That should work!
First I would suggest that you first try to find ways to narrow the redirects. If it possible I would suggest that it would be much more advisable to try to create your content dynamically based on your users authentication using languages like PHP or ASP (just to name two).
The classic way of disabling the caching on a webpage is to set two <meta> tags inside of your <head> </head> tags. However, you should note that these are technically not "correct" as they are not part of any of the "offical" standards documentation. This also means that I would again lean towards my first suggestion of finding a better delivery system which in turn should prevent the problem.
So for "testing" purposes the tags would be:
<HEAD>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
</HEAD>
Maybe I don't understand your question or dilemma (maybe because of lack of explanation or because I can't see your page at that link since I run Chrome), but there's an example I ran across here that works in Chrome by just using Javascript/jQuery to load, instead of CSS:
http://jsfiddle.net/2Cgyg/6/
Use image at URL: http://www.w3schools.com/cssref/img_tree.gif
And although the accepted answer didn't work for me in Chrome, this is the question I got the jsFiddle above, from:
Load Image from javascript
All the caching, etc. is unnecessary, and even something you wouldn't want to do if your images are ever updated to something else - they won't appear without forcing a refresh which you can only do through altering the file name like this to avoid users not seeing your updated image:
myPic.jpg?MMDDYYYY
And you could set the date according to the date you are modifying it.
clean your browser history like cache,cookies
clean the temporary internet file
if problem not solved then reinstall browser your problem is solved definitely

Chrome Extension: Communication iframe <-> Content Script

Well, a often discussed thing. But I can't get it work. What has to be done:
The Content or Background Script has to communicate with the iframe et vice versa.
The iframe is under my hand, so there is everything possible.
I tried a lot. It doesn't work at all. For instance: If I deploy the content script on every page with allFrames=true via (manifest). Ok, makes sense. The iframe is created later so the trigger won't be called. So let's do this: create the iframe and afterwards sending an executeScript request:
chrome.tabs.executeScript(tabinst.tab_id, { allFrames: true, file:'frame.js'}, function() {
console.log("done");
});
But that doesn't work either. Has anyone a solution to communicate with an XDM iframe and a chrome extension?
PS: How nice it would be if the chrome extension would allow postMessage on iframe
EDIT1:
The code doesn't get injected in the iframe. Scenario:
The file "file.js" has a simple foo function in it. I now apply it with the above statement 2 seconds after the iframe was created and showed. This function foo is not available in the iframe...but is in the content script. The ReferenceError is thrown by trying to execute foo within the iframe (by click).
So, it's not a timing thing. And it doesn't matter if I apply the Scripts via manifest and all_frames true. If that would work, the content_script would be available. But is not.
EDIT2:
#serg
Yeah, thanks, that works! I just got through it. My problem was, that I assumed that when the callback of chrome.tabs.executeScript is called, the requested script is ended and the including DOM manipulation finished. But that's actually not the case. It takes some time till the script in the iframe and the containing listener is ready.
So I had to send a chrome.extension.sendRequest from that script in the iframe and then start some code out of the background listener to manipulate the iframe. Thanks for your help.
PS: It's also possible to do it without "all_frames": true. It just takes some time till the dynamic iframe is ready. With a timeout it works. For the most cases, this is not useful, but maybe someone has another user interaction first.
PPS: I still can't see why it's possible like this, and not possible to send postMessage events. But maybe somewhen this will works.
I just tested and content script is getting injected into dynamically created iframes (I used manifest). I think the problem is you are trying to access content script's function within iframe, which is not allowed.
Inside your iframe you can't just do:
<a onclick="contentScriptFunction()"></a>
You need to be adding event listener from within the content script:
$("a").click(contentScriptFunction);

Why is my javascript function not found by the page it is embedded in?

I have a page that has a simple javascript in the header portion of the page:
<script type="text/javascript">
function doLogout() {
var conf = confirm("Really log out?");
if (conf === true) { //changed == to === for boolean comparison
$.post("logout.aspx");
}
}
</script>
It uses jQuery to do an AJAX post to my logout page. The only issue right now is that when I click on the link (logout) to fire this function, nothing happens. I checked FireBug's console, and it told me that the function is not defined. This has happened to me before, but I think I botched a bunch of code to fix it sometimes.
Does anyone know the proper way to fix this issue?
Edit
After doing a lot of googling and trying different things, I found this very concise and informative post. Apparently, as the linked article states, the way the script is referenced in the web site is important as it won't run properly otherwise! Hopefully this information will be useful for more people.
This can also occur if there is a syntax error earlier in your javascript code. Often this will just be interpreted as the function not existing (nor any function AFTER the error). Check the code above this code (if there is any) and this code for syntax errors.
A way to tell if the cache error is it is to open Firebug and view the Script source. If the page was cached, you won't see your code. If it loaded but has syntax errors, the code will show, though it won't "find" it.
Things to test:
1) Can you call this function from something else? Like add a <script> at the bottom of the page to call it?
2) Does the page validate? Sometimes I get screwy javascript errors if there is some busted HTML like a missing </b>
3) I've been starting to wrap my javascript in <![CDATA[ ]]> just incase I've got goofy chars in my javascript.
4) I assume you've tested this in other browsers and have the same behavior, right?
5) If you haven't installed it already, install the Web Developer firefox addon. It has a nifty toolbar menu that will disable the cache for you so everything reloads.
6) As weird as it sounds, I once hit a javascript issue that was because of how my text editor was saving UTF-8 files. I forget the details, but it was adding some byte-order-mark or something that upset the browser.
I've had this occur when the page had been cached and so it didn't load the new script in. So to fix it clear all private data from Firefox. Not sure if that helps but it sure happened to me a bunch.
Other ideas for you to test:
is the function defined in the DOM tab in FireBug?
if you call doLogout() from the FireBug console, what happens?
I assume this is not the only script on that page. Make sure that some later script is not modifying doLogout to something else
I had the same issue and tried all that's been suggested here without success.
The only way I fixed it was by discovering that in the <script src="jquery.js"> tag I was using in the head of the page I forgot to close it with its </script> causing the page to ignore all Javascript functions. So please check that your includes look like:
<script src="jquery.js"></script>
I hope that helps. Ross.
If you are using DevExpress controls these links may help you: How to register and execute a JavaScript downloaded to the client via a callback and How to register and execute a JavaScript downloaded to the client via a callback (standalone JS file) and Executing javascripts from user controls dynamically created through ASPxCallback panels
The issue might occur if you have NoScript. You should check and make sure it's not blocking said script.
I had this issue and discovered the problem was just a wrong case letter inside the name.
Call: filterCheckbox()
vs
function filterCheckBox() {}
problem: lowercase "box" vs uppercase "Box".
So check if the name is exactly the same.

Resources