opening a link in <body onload="" - javascript

I guess this is possible, but I don't know how.
<a rel="width[640];height[480];autostart[true];loop[true];title[Google]" class="jcepopup" href="http://www.google.nl">Aanbieding</a>
Can it be done linke this?
<body onload="javascript: laden()">
<script type="text/javascript">
function laden()
{
window.open('http://www.google.nl rel="width[640];height[480];autostart[true];loop[true];title[Google]" class="jcepopup"', 'blablabla', 'width=720', 'heigt=500');
}

Most browsers these days block pop-ups because of this very use. There are a couple of generally accepted ways to get around this (I hope lightning does not strike me down).
Open the pop-up after the user clicks on something
Embed some Flash and use ActionScript to open it
The Flash method is renowned enough that you can find several links about it online. If you can shove some Javascript into some container, you can essentially bypass the restrictions (if you get creative). Windows Media files, for instance. Movies are great for opening pop-ups.
I'm going to leave this intentionally vague, as I don't want to be responsible for the proliferation of more pop-ups.

Yes, but you don't need the javascript: in your onload, you can just do:
<body onload="laden();">

Related

Highlighting links from websites with a browser extension

I'm looking to develop a browser extension that would recognize links from news websites and display that articles' content in a popup screen upon a mouseover. The problem is, I have no idea where to start. I have past experience in HTML, CSS, and Javascript but in terms of browser extensions I'm a fish out of water. Could someone explain to me how one would go about starting something like this? Thanks!
You can create new extensions for Chrome this may be useful to you...
or refer this
I'm also an extension noob, but I know of a really good jQuery plugin for making the hover popups (tooltips).
http://jquerytools.github.io/documentation/tooltip/index.html

Cross-Browser compatible opening of a new tab/window (browser)

I'm sure you can help me with this issue:
I recently run into some issues with opening a new tab / pop-up on a php/javascript site.
My current solution is as followed:
<script type="text/javascript">
function Popup(url) {
window.open(url);
}
</script>
<div class="link_box">
<a class="link_box_link" href="javascript:Popup('http://www.<website>.com')"><website-name></a>
</div>
However some of my coworkers using IE6-8 can't seem to open the link. Now I hope you can help me finding the best possible and cross-browser compatible solution for opening a new tab or window. Any help or tip would be greatly appreciated!
Ok, after looking at the comments produced (mine included), I decided that I should sum it up in an answer.
The cross-browser compatible solution is simply this: (with no Javascript)
LINK TO GOOGLE
Read about it here.
There are a few reasons why this may not work:
browser settings;
pop-up blockers
About these, there isn't much you can do. Browser settings aren't editable by your script; AFAIK, there isn't a general way to circumvent pop-up blockers (and thank god for that!).
Although, there are a few workarounds that do work under specific conditions. Although, as it may be such a frustrating task to account and inquire about all those conditions with a script, my suggestion of using a modal window with an iframe still stands.
NOTE: Actually, using this should not bring that many trouble with pop-up blockers (though still possible). Note that most times pop-up blockers are triggered exactly by detecting client-side scripting to open new windows - being the method you tried possibly one of the first to trigger it.
You have to manipulate the target like Joum saved in the comment section. Or you simple are using the posible to return false;.
<a class='popup' href='www.websitename.com'>website</a>
$('a.popup').live('click', function(){
newwindow=window.open($(this).attr('href'),'','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
});

Refresh selected iframes on browser resize

I'm a complete beginner in the development side of things and would greatly appreciate any help.
I have the following code that refreshes an entire page when the browser is resized:
$(window).bind('resize',function(){
window.location.href = window.location.href;
});
However, I want the refresh to be targeted at particular iframes with unique id's instead of the whole page.
Again, thank you in advance for any help.
Use:
$(window).resize(function(){
document.getElementById('FrameID').contentDocument.location.reload(true);
});
And consider using classes instead of IDs if you have multiple iFrames.
I am having issues with the Facebook social widget and I was hoping this would fix it. Your code was helpful (a good start).
That said, it did not work.
I will post a solution if I find one. Facebook really needs to update their widget. It really is problematic with responsive sites (mobile devices). Considering they created React code, it really is not very well written.
jQuery seems a better solution since I did not have an id to target) but the problem is deeper within the iframe.
// refresh facebook iframe on page resize (did not work)
$(window).resize(function(){
$('.fb iframe')[0].contentDocument.location.reload(true);
});
//--- other ways to reload iframes---
//reload 1 iframe
$('#iframe')[0].contentWindow.location.reload(true);
//reload all iFrames
$('iframe').each(function() {
this.contentWindow.location.reload(true);
});
//Another way to reload all iFrames
$('iframe').attr('src', $('iframe').attr('src'));
Update...
I found these two well-written pages on the subject. Hopefully, it works.
How to make the Facebook Page Plugin fully responsive
Making The Facebook Page Plugin Responsive
UPDATE
The code above is nice, but they did not have it ready to rock and roll. The showed examples for their site and I almost got it working, but there is still a bug in my code.
so...
This is totally cheating, but I was looking at the source code and opened the iframe location from Facebook and it actually worked (it seems allowed). So far it seems to work with other profiles too (so long as you grant permission first).
I just hardcoded the iframe vs using their JavaScript code. It also works 1000x times better/faster this way and it is already responsive. It is nuts I had spent so much time with trying to fix Facebook's code. Using a straight URL link in the iframe loads way faster (geezzz).
Here is an example of what I used for the final URL (I cleaned up the unneeded parameters.
https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FYOURFACEBOOKUSERNAME&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500
Again, keep in mind for this to work, you need to create a social box at Facebook first, so that you can grant permission. I tried to do it with my personal username and since I have never created one before, it did not work. Again, this is theory, but that makes sense.My actual site is using another client and I also tested other clients. It seems to work fine.
No promises it will work on a live site. It is possible Facbook blocks users that do not use it via the script, but we will see. I am guessing Facebook may use scripts in the code to check for location source, so this way may fail over time (don't know yet). Also, it is possible I am missing a needed key that Facebook genarates from the script thatI failed to notice (or removed). I was careful when I cleaned it up, and I did not want to include more than needed. We will see.
Anyways, try your own tests via the source code please. I need to work on other more important stuff, and this works and seems to be a simple very effective solution. I will have more time later if it fails. The client wont know and again, it is faster and seem to work better.
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>
ONE MORE UPDATE.
It seems to be working, but I still need to send a refresh to the URL in the paramaters for the width. Also, note the maxium width for the social widget is 500px (so if you have a need for one bigger, it wont go more unless you use some kind of transform in CSS).
Here is the final code.
Funny about all this, I am back full circle. I am using some of the code we talked about above and some new code I figured out and wrote.
:)
Also noteworthy, I noticed the StackOverflow console is giving me an error.
Please ignore it. The error has something to do with the iframe reference calling Facebook which StackOverflow does not like. As far as I can tell, there is no error.
If I am wrong, let me know.
// Fixes Facebook iFrame on page resize (Responsive)
$(window).resize(function() {
$('#fb-iframe').attr('src', "https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=" + $('#fb-iframe').width())
});
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>

Disable browser "back" button [duplicate]

This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Disable browser's back button
How can I disable a browsers back button, in an asp.net mvc project. Can I use java script for this ? or is there any other ways to do this ?
This has often been discussed on countless threads, the most exhaustive article is here and why it always will not work.
A website should not try to cripple the browser, but instead should work inside the browser-page system of the web. There are good reason for not wanting the user to click back (re-POSTing data, especially financial transactions and the like), but rather than forcing them not to, your website should handle these gracefully. Using a good framework like .NET leaves you a lot of great options for keeping your site stateful even amid the stateless web. Write your code to fit the browser, don't make the browser fit your code (like the ridiculous no-right-click javascripts of yesteryear).
That said, thankfully there is no way to do this, and even if there were, it could always be disabled on the client side.
I would have to assume it is impossible. That would be a big security issue on most browsers. I don't even remember in IE4 when the most extreme things were allows, you being able to do it.
I don't think that you can disable the back button, althought there are some "techniques" like those described in this site: http://www.htmlgoodies.com/tutorials/buttons/article.php/3478911/Disabling-the-Back-Button.htm
It is not possible to the disable the BACK button of the browser, but if you don't want the user to go back to a previous page then you can add this javascript function to your page:
<script language="javascript">
function DisableBackButton()
{
history.forward();
}
</script>
And call this function in body only..
Like
<form id="form1" runat="server">
<script language="javascript">DisableBackButton();</script>
---your page design----------
</form>

Hiding toolbar / status bar with javascript in CURRENT browser window?

Is there some way to hide the browser toolbar / statusbar etc in current window via javascript? I know I can do it in a popup with window.open() but I need to do it this way. Is it possible at all?
As per the previous answer, this isn't possible to my knowledge and is best avoided anyway. Even if a solution can be found, bear in mind that most browsers these days allow the user to prevent Javascript from interfering with their browser settings and window chrome, even when using window.open. So you've got absolutely no way of guarenteeing the behaviour that you're looking for and consequently you're best off forgetting about it altogether. Let the user decide how they want their window configured.
I believe this is not possible. And anyway, just don't do it. Your page can do what it wants with the rendering area, but the rest of the browser belongs to the user and websites have no business messing with it.
Marijn: ok thanks. This is for an intranet site and we display InfoPath forms as separate, no-toolbar, no-statusbar windows. This is a client requirement, I'm not trying to do evil ;)
To Martin Meredith, Luke, Marijn: thanks for your quick reply. It is now settled that it's not possible.
I agree with you all about this being an undesirable behavior, but as i stated before, this is for a bank intranet application where all users are running a tightly controlled, centrally-configured, customized and hacked to death browser they have no control over anyway, and the client actually wants this behavior for the application. It would be dumb and annoying to do this in a public facing/general website, of course. But sometimes we just have to get the job done :(
No. This would be a massive security hole if it were possible... not to mention annoying.
My browser wont even let you do this in popups... which can be annoying aswell!
You may want to investigate using an HTA (HTML Application).
It will render HTML pages with zero browser chrome, a custom icon can be shown on the task bar, and the entire "caption" can be removed. The last option yields a floating window without eve a close button.
For how I imagine your needs to be, you would want to start with something like:
<html>
<head>
<title>HTA Demonstration</title>
<hta:application innerborder="no" icon="magnify.exe" />
</head>
<body style="overflow: hidden; margin: 0;">
<iframe src="http://www.yahoo.com" style="width: 100%; height: 100%;"></iframe>
</body>
</html>
Save the above HTML into a file and give it "example.hta" as the file name. You'll then have a generic icon on your desktop which you can double click on to start.
<hta:application innerborder="no" caption="no" icon="magnify.exe" />
This change will remove the title bar when running the script. Press Alt-F4 to exit the script if you do this.
This will also only work with IE, however that should not be an issue on an intranet.

Categories

Resources