I am new to HTML so this question might sound a bit lame. Anyways I have a saved webpage on my desktop that when i open it in google chrome i want it to show a specific URL instead of its current location. Any ideas how i might get this to work?
I tried using the history.pushState but i have no idea why it is not working. I created a simple page for now to test it:
<html>
<head>
<script>
function setURL()
{
history.pushState("Test","page2", "www.test.com");
}
</script>
</head>
<body>
<button type="button" onclick="setURL()">Set Url</button>
</body>
</html>
Any help would be greatly appreciated. Thank you
I think you've misunderstood how it works. It's used to change the page location, without reloading the content, on the same domain. For example: you're on the index. Then you click the "about" page, it will change the url from www.hello.com to www.hello.com/about.
With additional JS in use, you could make it load the changes to make it look like the about page without loading the entire thing (but this is unrelated to what you want; just explaining an application for it.)
It does not allow for complete URL overwriting and your desktop file is not considered to be the same domain as your website (security limitation).
If this is to fool someone: you won't be able to do it.
Related
Is there any tricks to hide the src url in iframe? Or maybe encrypt a part of the external url?
TLDR: No, You cant.
You can prevent it appearing at browser page source using JavaScript. But people still can see it with Inspect Element option.
And if you encrypt the URL, it won't work. HTML src must have a specific URL/File path. It can't understand encrypted text.
Still, If you want to hide it from page source, Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<iframe id="extframe" src=""></iframe>
<script src="script.js"></script>
</body>
</html>
JavaScript at script.js file:
var iframeUrl = document.querySelector('#extframe');
iframeUrl .setAttribute('src', 'https://stackoverflow.com/');
You can't. If the URL isn't in the HTML, how would the browser know where to get it?
One thing you could try is to obscure it to make it slightly harder for someone to find it. You could have the src attribute be blank and then when the document is ready fetch the URL value from the server in a separate AJAX request and update the iframe tag to include that value in the src.
This would be a fair amount of work, however, and wouldn't really accomplish anything. The only thing it would prevent is somebody finding it by viewing the page source. They can still look at the "current version" of the HTML in any web browser's debugging tools. (Right click on an element and inspect it, which is nearly ubiquitous at this point.) Or any other normal traffic-sniffing tools will see it plain as day.
Ultimately, if the web browser needs to know a piece of information, then that information needs to be visible on the client-side.
I'm making a chrome extension that loads an <iframe> of another site onto the New Tab page. Right now I'm loading YouTube's subscription page (don't worry about the Same-Origin issue, I solved that already), but now I'm trying to cut everything out of the page except the #content element (the subscription feed element).
Here's my code:
Background.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<iframe id="left" src="left.html" name="left"></iframe>
<iframe id="right" src="right.html" name="right"></iframe>
</html>
Left and Right .html
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Load new document" id="loader">
</body>
<script type="text/javascript" src="window.js"></script>
</html>
Window.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("loader").addEventListener("click", loadUrl);
});
function loadUrl()
{
window.location = 'https://www.youtube.com/feed/subscriptions';
[].forEach.call(document.querySelectorAll(!'#content'),function(e){
e.parentNode.removeChild(e);
});
return false;
}
As you can see, right now I'm loading it in with a button. Once it's pressed, it loads YouTube and should cut out all the html except #content, but it's not. Is there another way to solve this, possibly with jQuery? Thanks!
document.querySelectorAll(!'#content')
won't meet your requirements, you should use the following instead if you do want to remove all elements except #content.
document.querySelectorAll('*:not(#content)')
#content isn't accessible to document, because the global document is on a different page - the page containing the iframes, but not their contents. Moreover, document.querySelectorAll(!'#content') is not a valid selector string - that will be interpreted as document.querySelectorAll(false) because ! of a non-empty string returns false.
You're going to have a hard time getting access to the contents of an iframe, just in general. Most browsers, like Chrome, won't event load the contents of an iframe if X-Frame-Options is set to SAMEORIGIN, which, for youtube, it certainly is.
Supposing you're getting around this (with a reverse proxy, perhaps?), you can get the contents of an iframe using JavaScript like so:
iframe.contentWindow.document
You can then use querySelector and friends on the iframe:
iframeDocument.querySelector('#content')
And if you want to cut out a node, you should remove() it:
iframeDocument.querySelector('#content').remove()
Now, having said all of that:
Don't do this.
You're abusing iframes, which requires some very creative (read: brittle, hacky) code, and Youtube certainly has a public API from which you can get access to someone's Youtube feed - and in a way that Youtube is far less likely to block by tightening security, or even by accident. (Suppose the HTML on their page changes, so #content contains everything. Or suppose they decide to check that the correct origin is requesting the page with JavaScript, and block you.)
What you want, you should use Youtube's API for.
I have an iframe on my webpage that contains a linked qwebirc webchat that automatically logs visitors into irc with a temporary nick so all page visitors can instantly chat with each other.
I need to switch from qwebirc to kiwi irc, but it doesn't support autoconnecting.
** It will be connecting to our own irc server and I understand the risk of automatically joining visitors.
Since we cannot install a custom kiwi irc installation to our web server and customize it to autojoin, I know that I'll need to use a jquery function to automatically click the start button on the linked widget in the iframe.
Here is an example of what I'm working with:
<html>
<head>
<title></title>
</head>
<body bgcolor="#000000" link="#FFFFFF" vlink="#FF0000" alink="#FFA500">
<center>
<font face="tahoma" color="#FFFFFF">The "Start..." button below needs to be automatically clicked on page visit.</font>
<br><br>
<iframe src="https://kiwiirc.com/client/irc.MYCHATSERVER.net:6660/?nick=TESTNAME-?&theme=mini#TESTCHANNEL" height="400" width="400"></iframe>
</center>
</body>
</html>
(our server and channel have been renamed for this post, so it shouldn't actually connect)
I know that the function we need to use is:
$(document).ready(function(){
$('#some-id').trigger('click');
});
but I can't seem to find the id of the button.. the only thing I can find is the following line:
<button type="submit">Start...</button>
..that I found here: http://i.imgur.com/05IFHSZ.jpg
I'm not very good with javascript, but am a very willing learner and have a bit of a problem to solve. Any advice on how to incorporate the jquery code is greatly appreciated.
Thanks!!!
You will not be able to interact with elements inside the iframe using scripts from the parent document, or vice versa. This is a security measure and not something you can circumvent.
The same-origin policy restricts how a document or script loaded from
one origin can interact with a resource from another origin.
See Same-origin policy
I took a look at the IRC page and noticed that the button that needs to be clicked—<button type="submit">Start...</button>—is always the first button on the page. Therefore, you can use the following code to click it:
$("button").first().click()
note:
Concerning what pwdst said, you cannot script cross-domain (by default). However, this jQuery library may very well be worth looking into.
I think I might be going crazy at this point. I had an ASP page working yesterday, and came in today to Firebug telling me it cannot detect the JavaScript on the page. Love it when things change after not touching them.
So I start trying to figure out what is happening. I tried slimming down the code, this answer, restarting Firefox, saving the page under a new name and loading the new one, and adding a ridiculous amount of code I generally consider unnecessary. I even tried removing everything from the page and changing it to this:
<script>
alert("yay");
</script>
Does not trigger alert, and Firebug says "No JavaScript on this page". I've been looking for explanations for almost 2 hours and cannot figure out what is happening. I know I did not deactivate anything because other pages will show JavaScript and function properly. I also know that no add-ons are causing it.
I am using Firefox 28.0 (also tried on 27.0.1). Opening the page in Chrome triggers the alert.
(Damn I meant to post this as a comment).
As you responded I'll re-popualate...
I create jsfiddle,
<body>
<script>
alert("yay");
</script>
</body>
Also ensure your browser has javascript enabled.
You should follow the instructions on the Firebug's first aid page.
I assume it's either some Firebug setting or a conflict with another extension. (I see at least YSlow and FlashFirebug installed.)
To check that you can create a new profile and just install Firebug.
Closing the tab and opening the same link in a new tab seemed to resolve the issue.
I'm not sure if any of the prior attempts factored in, so I will list them as well. To be clear, none of these worked, but may have paved the way in some fashion.
Restarting Firefox
"Clear Activation List" on Firebug
Save page under new filename and load the new page
Uninstalling add-ons (all of them)
Create new profile and load page on that profile
Add a <!DOCTYPE html> to the top
Add type="text/javascript" to script tags
Add charset="utf-8" to script tags
Add <meta charset="utf-8"> in <head>
I have a bookmarklet that launches a window.open javascript function to open a small window with my bookmarklet -- an external feature used to communicate between any visted site and my server. I'd like for a favicon to show up when the bookmarklet is added to the bookmark toolbar. I realize that the bookmarklet is javascript, there is no domain tied to it so it's going to be either difficult or impossible to achieve this goal.
My understanding of the problem:
Favicons are easy to understand, a link within the head of an HTML doc. The browser can pull this when bookmarking an actual site by reference. However, as you see my bookmarklet is ran off a javascript launch code where there exists no HTML, therefor no link to a favicon. I'm not ready to give up yet though, I feel that there's some injection that can be made...
As of now, the bookmarklet launch code looks like this:
Current Script -- bookmarklet, no favicon (note all code is formated with line breaks -- won't work in all browsers, normally its one line)
javascript:void(window.open(
'http://mydomain.com/bookmarklet/form?u='
+encodeURIComponent(location.href)+
't='+encodeURIComponent(document.title),
'test','status=0,toolbar=0,location=0,menubar=0,
resizable=false,scrollbars=false,height=379,width=379'
));
The closest thing I've found to a solution is as follows, but it doesn't open a new window -- just creates a new tab with the html as the page:
Working favicon, no bookmarklet window
javascript:'<!DOCTYPE html>
<html><head>
<title>Hello World</title>
<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
</head>
<body>Hello World</body>
</html>';
I have tried a combination of the two but it didn't seem to use the icon. I'd be curious to know if anyone can see a type of workaround.. I think it could be possible, I just don't think it's set up correctly as I've been trying.
My hybrid of the two -- bookmarklet but no favicon
javascript:'<!DOCTYPE html>
<html><head>
<title>Hello World</title>
<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
</head><body>Hello World</body></html>';
window.open('http://mydomain.com/bookmarklet/form?u='
+encodeURIComponent(location.href)+
'&t='+encodeURIComponent(document.title),
'test',
'status=0,toolbar=0,location=0,menubar=0,resizable=false,
scrollbars=false,height=379,width=379').void(0);
What I did was use the html structure before firing window.open(), this successfully opened my bookmarklet in a new window, but no favicon showed up for the bookmark icon.
Logical Solution:
My thoughts on this would be to have the bookmarklet point to a page that is simply an HTML file with a favicon link and the launch script in the <head>. However, I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?
There exists a similar question but I did not seem to find the answer I'm looking for:
How to have favicon / icon set when bookmarklet dragged to toolbar?
Source for the working javascript favicon (no bookmarklet however):
http://www.tapper-ware.net/blog/?p=97
I'd be interested in what your current knowledge/thoughts on this would be
I tried and retried, and my first conclusion was: "It can't be done (at least not in FF4 on Ubuntu 11.04)". You need (I guess) a simple solution for your site visitors (drag&drop, add bookmark with 1 click ...).
I have found a workaround, it does it's job, but it is a little buggy (maybe someone can help fix it).
PROS:
add a icon to the bookmarklet
it uses windows.open
doesn't leave empty pages behind
CONS:
it reloads the current page (instead of leave a page behind)
Can't make Firefox POP-ul blocker allow "javascript:" generated HTML page to load POP-ups, so you need to hit allow every time
This is the code:
Bookmarklet
This is a link that you put on your page, the user needs to drag&drop this link to the bookmark bar (you can use something like Add Bookmark Script for adding it as a bookmark with 1 click), The bookmark has no icon until the user click's it at least once.
So how it supose to work:
1. redirect the user to the generated HTML page from the bookmarklet (that makes the ICON posible)
2. onLoad open the window you need using "windows.open"
3. redirect the page back using "history.back(-1)"
In theory everithing happens so fast, that the user does't see the new page, just that the current page is reloading, and a new windows appear.
The problem:
1. I use setTimeout for history.back beacause window.open is blocked by Firefox, so I need to click allow every single time (if somebody can fix this ... we have a chance of using this, develop it further :) )
I know THIS is not a reliable solution, but this is the only solution I've got so far.
Hope this helps a little. :)
Some of the things that I've tried that might possibly get you going a bit more:
Append a new link element to the current document:
javascript: var newLink = document.createElement('link');
newLink.setAttribute('rel','icon');
newLink.setAttribute('type','image/png');
newLink.setAttribute('href','http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png');
document.querySelector('head').appendChild(newLink);
void(0);
Note that I was using the querySelector due to IE testing (though works in modern browsers as well). With Chrome and FF, I kept getting invalid character when trying to create the element, so I had to do piecewise attribute setting.
Tried using base64 encoded image string using the "data:image/png;base64,iVBORw0KGgoAAAA..." URI schema, but that didn't help anything due to the fact that I still had to set it to the current HTML text (which I could do, but ran into the same problem as you above of no bookmarklet).
Maybe this can't be done due to cross site scripting concerns? Not sure... Either way, really curious to see what you come up with (if you manage to come up with anything).
"I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?"
If what you after really is the visual effect, you can try launch the blank HTML in hidden iframe, then launch the javascript.
Hope that helps