Javascript: Open link in new page and run script - javascript

I require the ability to open a new window
window.open(url,'_blank');
Then run a javascript script such as
window.open(url,'_blank').ready("javascript in here");
But I don't know how to do it, is there a way that I can do this?
The description is short but I think that's all that needs to be said

In short you cannot do what you are asking. The new window is sandboxed. It can only run javascript referenced within its own html file.
One possible solution that might get you what you need would be to use postMessage. Even so in order to do this the receiving page needs to be listening to potential messages.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
An alternative would be to include a query param in the url and parse that param out client side in the new window and take action based on the value of the param.

I don't know exactly what your use case is, but browser extensions allow you to run arbitrary JavaScript code in webpages (content_scripts for Chrome, for example).
The downside is that the user need to install the extension.

Related

Is it possible to debug JS when the URL keeps changing?

I'm trying to debug the JavaScript of a website which references some JS via a random URL path each pageload. This makes Chrome think that the JS is a different document, but I can see the same JS is being served up each time. However, breakpoints don't stay because the URL is different.
Is there a way I can get breakpoints to stay somehow between page loads of the same JS with different URL paths, or maybe break on function name instead of the normal way?
The only way i think is to put
debugger;
everywhere you wanted the breakpoint. As you have rightly understood that the browser considers it as a new file, and there is no way to tell the browser that it is same file when the URL is different.

Can I make a Javascript button force the browser to ignore cache?

I know there is a lot about this, but I can't find a solution that fits my situation. I am following behind someone else's asp.net code. We have a large amount of html and xml files generated by our site that a user can see. In one place, the link dynamically generated to load one of these pages is actually in a miniature form, making the browser think data is being submitted and looking for something 'new.' But the other is a button with the link generated in the vb code behind using a javascript function to open the page in a new window. I have tried simulating a form submit with "?submit=....." at the end but it didn't work.
tl;dr What javascript function can open a page and tell the browser to get the newest version, ignoring cache?
In JavaScript, I think the only way to prevent caching is to modify the url. One trick is to use the current date as timestamp:
url = url + "?_ts="+new Date().getTime();
(of course if your url already includes a querystring then replace the ? with an &)
There is no JavaScript to do what you need. If you need a fresh version, the easiest way is to add a timestamp to the URL's query string.
<script type="text/javascript" src="/js/file?cacheBuster=<?= DateTime.Now ?>" > </script>
For better control, you can use a build version as your cacheBuster param so you don't have to request new files every time.

ExternalInterface passing values from swf to an iFrame on the same page

On a page I have a an iFrame and a swf, I've been trying to use ExternalInterface to pass values from the swf to the iFrame, anyone ever tried this and had any luck? I won't be able to post any code until tomorrow, will update then if needed.
Thanks in adavnce.
Here is a visualization of what I need to accomplish, perhaps if it can't be done the way I said someone will have a suggestion of another way to accomplish this.
Try to target the frame. This should work with one frame on the page or you will have to change the index.
duhFrame = window.frames[0]
targetElement = duhFrame.getElementById('someIframeElement');
If this doesn't work for you then use LocalConnection and put a hidden swf on the iframe file.
LocalConnection is Global to the browser so be aware that if two browser windows are open you will get two iframes connecting on the same name and will get some funky results. So change the connection name via query string and flashvars.
Its a real hackish workaround but it will work.
[EDIT]
One more thing make sure your javascript callback function is getting called as ExternalInterface has major domain issues when running under the file structure and not in a domain(EX: clicking run in the editor ). Try uploading to your server and change your embed code to allow for it. Also dont forget to update your crossdomain.xml(s).
You cannot access iframes from outside of them. These are security reasons, and browsers will and should block such attempts.

How to capture a complete webpage using javascript

I inject javascript code into a page user is currently viewing, on users command this script make DOM changes. At the end of this interaction user might want to save the page so that s/he can view/edit it later. I could remember the DOM changes that user made, But if the original page(at its source) is changed, I will not be able to restore this page for user. That is why I want to send the changed page to my server. I should be able to restore it completely and the page should behave exactly the way it did(including scripts and media).
Additionally I can not store media of users page at my end(resource limitation), so I guess I have to parse and modify all addresses/references/links of media to global URL/URI in various scripts(HTML/CSS/JavaScript).
Now the question is, Is there a library/framework/jquery extension that can help me achieve this objective ?
else, What is the right/professional way to do it ?
Since you are using jQuery you could try $("html").html(); just make sure to add the appropriate <html> tags when you output it again.
$('body').html()
$('head').html()
$('html').html()
Download firebug, and try it in the console window on this page. I am getting what looks like the correct data back.
Have I got It right that you are building some kind of CMS that let's the user edit entire pages (Not just seperate content blocks) in Contenteditable mode?
I would definatly advise looking at a solution like ckeditor/tinymce etc... Because doing it all yourself will be a terrible pain.
The answer from #Sydenam should work fine to save the whole HTML page.
Meanwhile, and this is IMPORTANT, I would recommend you to consider a potential SECURITY ISSUE here. Indeed the user can inject whatever he wants in the DOM and have you saving it, like nasty Javascript functions sending confidential information on a remote server for example.
So, in my perspective, a professional way of doing this would be to dedicate a PART of the DOM only to that usage, let say a <div id='editable_div'> that you can load using a $('#editable_div').load('your_url',parameters, etc...), and save afterward using another AJAX call.
When saving it you can parse this chunk of HTML and make sure nothing nasty is inside with some regexp (like tags).
Hope it helps,
Regards,

What is a "?" for in the src attribute of a html script tag?

If this has been asked before, I apologize but this is kinda of a hard question to search for. This is the first time I have come across this in all my years of web development, so I'm pretty curious.
I am editing some HTML files for a website, and I have noticed that in the src attribute of the script tags that the previous author appended a question mark followed by data.
Ex: <script src="./js/somefile.js?version=3.2"></script>
I know that this is used in some languages for value passing in GET request, such as PHP, but as I far as I ever knew, this wasn't done in javascript - at least in calling a javascript file. Does anyone know what this does, if anything?
EDIT: Wow, a lot of responses. Thanks one and all. And since a lot of people are saying similar things, I will post an global update instead of commenting everyone.
In this case the javascript files are static, hence my curiosity. I have also opened them up and did not see anything attempt to access variables on file load. I've never thought about caching or plain version control, both which seam more likely in this circumstance.
I believe what the author was doing was ensuring that if he creates version 3.3 of his script he can change the version= in the url of the script to ensure that users download the new file instead of running off of the old script cached in their browser.
So in this case it is part of the caching strategy.
My guess is it's so if he publishes a new version of the JavaScript file, he can bump the version in the HTML documents. This will not do anything server-side when requested, but it causes the browser to treat it as a different file, effectively forcing the browser to re-fetch the script and bypass the local cache of the file.
This way, you can set a really high cache time (like a week or a month!) but not sacrifice the ability to update scripts frequently if necessary.
What you have to remember is that this ./js/somefile.js?version=3.2 doesn't have to be a physical file. It can be a page which creates the file on the fly. So you could have it where the request says, "Hey give me version 3 of this js file," and the server side code creates it and writes it to the output stream.
The other option is to force the browser to not cache the file and pull down the new one when it makes the request. Since the URI changed, it will think the file is completely new.
A (well-configured) web server will send static files like JavaScript source code once and tell the web browser to cache that file locally for a certain period of time (could be a day, a week, a month, or longer). When the browser sees another request for that same file, it will just use that version instead of getting new code from the server.
If the URL changes -- for example by adding a query string -- then the browser suspects that its cached version is no good and gets a new one. As such, the ? helps developers say "Oops, I changed this file, make sure the browser gets a new copy."
In this case it's probably being used to ensure the source file isn't cached between versions.
Of course, it could also be used server side to generate the javascript file, without knowing what you have on the other end of the request, it's difficult to be definitive.
BTW, the ?... portion of the url is called the query string.
this is used to guarantee that the browser downloads a new version of the script when available. The version number in the url is incremented each time a new version is deployed so that the browser see it as a different file.
Just because the file extension is .js doesn't mean that the target is an actual .js file. They could set up their web server to pass the requested URL to a script (or literally have a script named somefile.js) and have that interpret the filename and version.
The query string has nothing to do with the javascript. Some server side code is hosting up a different version depending on that querystring it appears.
You should never assume anything about paths in a URL. The extension on a path in a URL doesn't really tell you anything. URLs can be completely dynamic and served by some server side code or can rewritten in web servers dynamically.
Now it is common to add a querystring to urls when loading javascript files to prevent client side caching. If the page updates and references a new version of the script then the page can bust through and cause the client to refresh it's script.

Categories

Resources