Is there anyway to set the title of a website via JS onload? I wrote this but I'm not sure where it's incorrect:
function my_code(){
document.title = "The new title goes here.";
}
window.onload=my_code();
The page title is static by the way.
Edit: The reason why I want to do it this way is because I'm writing a Safari Extension for a website that does not include tags so I wanted to insert one via JS.
You don't need to wait for the load event.
Just write document.title = ... anywhere.
If you want to change the title after the page loaded, you have to assign a function reference to onload (your function assigns the return value of my_code):
window.onload = my_code;
However, you most certainly can set the title without waiting for the load event.
I'm not familiar with Safari extensions, but you should also make sure that window actually refers to the page's window.
Related
Say I have a simple script
var i = 0;
test();
function test() {
console.log(i++);
setTimeout(test, 1000);
}
I put it in a Google Chrome console. How do I make it continue to run after the page navigates to another (should continue to print out numbers when browsing the web)?
Maybe save the variable 'i' in onbeforeunload() function, and launch a new script with that saved variable?
How do I make it continue to run after the page navigates to another
you can't, the script cannot continue on another page, it's the browser that runs the javascript in the page, and that will stop it when moving to another page.
(or) should continue to print out numbers when browsing the web?
you have yourself answered this. You can certainly save the counter in localstorage and resume counting on the next page, provided this next page contains the same or similar script and the logic to restore the counter from localStorage.
Or, you can move part of this logic to a server-side script.
I suppose this script is an example and displaying numbers is not really what you want to do.
If you are looking for something to run script even when you have left the browser, I suggest you take a look at Service workers.
If you want more resources, you can check Jake Archibald's blog. He is a chrome developer and he is always talking about service workers. An introduction here.
I didn't see any good suggestions posted already for what I was trying to do but I came up with something that worked for me. I wanted to add a navigation element on the page and not have it go away after navigating. This was on a website that was not managed by me. I removed the innerHtml of the body of the page, added an iframe and pointed it at the page I was on, set it to 100% width and height and removed the border. Then I could navigate within the iframe, but still have my script function run in a set timeout to add the navigation element back to the page after it navigated. Something like this:
document.body.innerHTML = ''
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'iframe');
document.body.appendChild(iframe);
iframe.setAttribute('src', window.location.href);
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.border = "0";
function addContent(){
setTimeout(()=>{
elementToAddTo = iframe.contentWindow.document.getElementById('my-element-id')];
contentToAdd = document.createElement('div');
contentToAdd.innerHTML = `<p>My new content</p>`
elementToAddTo.insertBefore(contentToAdd, elementToAddTo.childNodes[0]);
}, 1000);
}
addContent()
Then in that new content somewhere I had an onchange event which would navigate and call the addContent function by saying window.top.addContent();
onchange="window.location.href = window.location.href.replace(/(param1=.*)/, 'param1='+myNewParamValue); window.top.addContent();">
I Understand this approach makes a lot of assumptions about what you're trying to do and maybe it is only working for me because I'm only changing a param value, but I want to leave this hear in case it helps somebody trying to figure out how to do something similar.
Here's a sample code:
HTML
<script> alert('This is alert!') </script>
JS
window.alert = function(data) //alert() over-riding
{
console.log("Alert over-ridden");
}
Issue:
HTML
<iframe src=javascript:alert('Iframealert')>
JS
window.alert = function(data) //alert() over-riding
{
console.log("Alert over-ridden"); //This doesn't execute - I mean, this over-ride function is not called when the above iframe alert is executed
}
I knew iframe in another document is not applicable for parent over-riding (due to same domain policy), but, the src JS execution happens only in the parent.
So, how do I over-ride alert() which is applicable to above iframe tag?
Update 1:
The HTML code is static, and I cannot make any modifications to it. I can only write some JS and append to the HTML.
Is there any way to over-ride the alert() of nested browsing window?
Nice question! The answer starts by looking at the rules for what happens when the src attribute is evaluated.
When this happens, the spec follows a number of steps during navigation. We end up step 14, which pertains to javascript: schemes.
Within that step, there are a series of sub-steps, one of which is:
Create a script, using script source as the script source, address as the script source URL, JavaScript as the scripting language, and the script settings object of the Window object of the active document of the browsing context being navigated.
The important thing here is "the Window object of the active document of the browsing context being navigated". Because you're navigating an <iframe>, you're actually dealing with a Nested Browsing Context, which has it's own window, so having overridden the parent window.alert makes no difference.
You can, however, override the alert of the inner window:
document.getElementById('myIframe').contentWindow.alert = function(msg) {
console.log('Overridden iframe: ' + msg);
}
This will only work for the javascript: scheme url presented to the src attribute, as at the time this code executes we were simply trying to get the address of the page to navigate the <iframe> to. When navigation actually occurs, a new Document object with it's own window is created in step 23 of the navigation steps, at which point you lose your overridden alert.
This also relies on setting the src attribute using JavaScript after you've overridden the alert, you can't use an inline src attribute on the element as the element needs to be in the page to get hold of it and it's contentWindow, and putting it in the page means the src will get evaluated.
Here's a fiddle demonstrating the overriding of the alert within the <iframe>'s src attribute.
I've looked around here and saw wonderful solutions how to print the content of a div using javascript by instantiating a new window and porting markup there.
My problem with that solution in SharePoint is that SP.*.js libraries load asynchronously and it freezes the print dialog screen or the browser itself.
Anybody was able to workaround this issue?
With sharepoint you can use ExecuteOrDelayUntilScriptLoaded to wait until SP.js loaded to make sure nothing freezes.
<script type="text/javascript">
function printPage(){
}
window.onload = function(){ ExecuteOrDelayUntilScriptLoaded(printPage, "sp.js"); };
</script>
I don't know SharePoint specifically, so I can't provide a specific example. However, it sounds like you are thinking of a technique like the one outlined on this other stackoverflow question.
Notice this is all one block of code that will execute sequentially. So we open a window, set the markup and print right away. No waiting around between those steps.
I would suggest that you don't call print at that point, but rather open the window, set the markup AND inject some more javascript in the new window markup. This new injected javascript will be where the actual printing takes places.
That injected script should have some logic to wait until certain script resources have finished loading after which it calls window.print(). Apparently window.onload doesn't fire until after all resources have finished loading. (onload doesn't fire until all content is either loaded or has failed to load). Here's a jquery example on stackoverflow. Also scripts are executed in the order the appear in the markup. So if your injected print window javascript is last, every other script above it must already be done. (So anything SharePoint injects in the markup should already have been executed).
For bonus points, if everything is going well, you could inject a 'loading mask' over the new print window and then hide the mask just before your javascript does its window.print().
The code given below will work with sharepoint, ASPX pages and with any browser. I tested the code with Sharepoint 2010 Visual webparts, and it works like a charm.
Place this Javascript code inside your webpart ASCX file
<script type="text/javascript">
function printPartOfPage(elementId) {
var printContent = document.getElementById(elementId);
var windowUrl = '';
var uniqueName = new Date();
var windowName = 'Print' ;
var printWindow = window.open(windowUrl, windowName, 'left=-20,top=-20,width=0,height=0');
printWindow.document.write('<HTML><Head><Title></Title>');
printWindow.document.write('</Head><Body style="margin-left:50px;margin-top:50px;font-size:10pt;">');
printWindow.document.write(printContent.innerHTML);
printWindow.document.write('</Body></HTML>');
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
</script>
& Update the print button ClientClick Event with
<img alt="" src="~/_layouts/images/WebpartCollection/Printer-30X30.jpg"
onclick="JavaScript:printPartOfPage('YourDivClientID');" />
I hope this will help you out.
I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.
It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.
I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.
Thanks for the help!
This will be difficult to do because it is considered xss and most browsers block that.
There are most likely some workarounds involving AJAX.
First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)
If that is the case, you can do the following in the iframed.html page:
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i=0, link; link = links[i]; i++) {
link.onclick = function() {
window.parent.location.href = '#' + encodeURIComponent(this.href);
}
}
}
</script>
This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)
Obviously, you would have to have a script like this on every page that is to appear inside the iframe.
Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:
window.onload = function() {
var url = window.location.hash.substr(1);
if (url) {
document.getElementById('iframe').src = url;
}
}
I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!
You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)
Instead, can you add code to the frame's contents to have it raise an event to the container frame?
In IE, the "OnReadyStateChanged" event might give you what you want.
I'm having some issues with a jQuery AJAX call. My code works fine when I request a page with no javascript in it, but when I have script tags in my code, things start to get weird.
It seems that any script tags referencing external URLs cause the browser to redirect. In firefox, the page goes blank. In safari, the page clears and loads with the content of the AJAX response. In both browsers, the URL doesn't change.
To be specific about my problem; I have a tab control in which I'm trying to embed the walkscore widget. Since it's pretty heavy on the client side, I only want to actually load it once the user clicks the tab it's in. The walkscore AJAX page looks like this:
<script type="text/javascript">
var ws_address = "1 Market St, San Francisco";
var ws_width = "500";
</script>
<script type="text/javascript" src="http://www.walkscore.com/tile/show-tile.php?wsid=MY_WSID">
</script>
Is there some restriction on script tags referencing external sites on AJAX calls? Is there any nice way around this?
-- Edit --
OK I've been playing with it for a bit and have narrowed down the problem a little. Let me try give a better explanation at the same time:
I have two files, index.html and walkscore.html
index.html
function widget() {
var widget = $('#walkscore');
$.get('/walkscore.html', function(data) {
$('#loading').slideUp(function() {
widget.html(data);
loaded[name] = true;
widget.slideDown();
});
});
}
walkscore.html - as shown in the top code block
In index.html, I have a link that calls the widget function. Whenever I click this link, the whole page is replaced by the output of the js file. It happens regardless of the domain the js file is from. It only seems to happen with js files that have document.write in them. It behaves in exactly the same way when I use the $.getScript function, even when it's in index.html
-- Edit --
It seems it has everything to do with the document.write. I made a copy of the walkscore javascript and replaced all occurrences of document.write with jquery.html, and it seems to work properly. I'm (obviously) a js noob. Is this the expected behavior of document.write? How come it doesn't do it when I include the script on a page load?
Load script separately from html content, you can use $.getScript( ).
It has to do with the document.write in the response.. I was able to fix this in Firefox by doing this:
<script type="text/javascript">
// save default document.write function so we can set it back
var write_func_holder = document.write;
// redefine document.write to output text target div
document.write = function(text) {
$('#ad_container').html($('#ad_container').html() + text);
}
</script>
<script language="JavaScript" type="text/javascript" src="javascriptfile">
</script>
<script type="text/javascript">
// reset document.write function
document.write = write_func_holder;
</script>
I'm still getting an issue in Safari where the browser refreshes to a blank page with just the content of the document.write and IE6, IE7 doesn't do anything at all. Firefox works though.
I hope this helps someone figure out what wrong and they in turn can fix the IE6/7 and Safari issues
It happens because of the document.write call. Here's some info on what's going on:
Writing After A Page Has Been Loaded
If document.write() is invoked after a page has finished loading, the entire static (non-script generated) content of a page will be replaced with the write method's parameter. This scenario is most often played out when the write method is invoked from an event handler - whether the method is in a function called by the event handler or alone inside the handler - because event handlers are triggered after a page has finished loading. This is important to know because static content replacement is not always the desired result. Another common scenario for content overwite has to do with writing content to a new window. In this case, the overwrite of blank page is the goal.
(source)
The solution I went with was to eliminate the document.write commands, and replace the content of a div instead. If you're loading an external script, and have no control over it, you can replace the document.write function with your own. It's discussed here:
http://www.webxpertz.net/forums/showthread.php?threadid=11658
Hope that helps someone out there!
Replacing document.write is the way to go. This is shameless self promotion, but if you have a non-trivial case, writeCapture.js handles all the edge cases.
I would first check the response of that script source, maybe something in that causes the unwanted behavior.
I am experiencing the EXACT same behaviour and spent some frustrating hours last night trying to figure out what the problem was and searching for answers to no avail. I'm surprised this is mentioned anywhere in the jquery docs as it seems like a plausible problem not some crazy never-to-be-encountered bug.
Anyway, here's my story in case anyone searches for something related.
I have a jquery enabled page that loads some content into a div using $.ajax(), it all works perfectly. What I needed to do was include one of those twitter retweet buttons that shows a count and enables you to tweet about the content on the page. To do this a simple piece of javascript from them should be included on the page.
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>
So in theory, that script tag should be returned in the ajax call and jquery should execute it and include the result of it, as I specified the data type as html in the $.ajax() call.
The external script on closer inspection does:
if(!url)
{
var url=window.location.href;
}
if(!size)
var size="big";
var height="75";
var width="54"
if(size=="small")
{
height="22";
width="120";
}
if(!username)
var username="none";
url=url.replace("?", "*");
var src="http://www.retweet.com/widget/button/"+size+"/"+username+"/"+url;
document.write('<iframe src="'+src+'" height="'+height+'" width="'+width+'" frameborder="0" scrolling="no"></iframe>');
Which obviously bombs out on the document.write.
Tonight i'll try the methods in this post and see if they work, thanks for the info.