Browser : IE6/IE7.
I want to load a new document into my html modal dialog, either via a form target or a javascript function.
<html> <!-- quirks mode -->
<head>
<script>
function openModal(url) {
if(window.showModalDialog) showModalDialog(url);
else {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
open(url, "", "modal=yes");
} catch (e) {
alert("dialog windows unsupported by browser");
}
}
}
</script>
</head>
<body style="background:red" onload="setTimeout(function(){document.body.style.backgroundColor='white'},100)">
Open Modal
<form>
<input type="submit" value="Send Form" />
</form>
Reload content
</body>
</html>
In Gecko-based browsers, it works.
In IE, when in the modal dialog window, the form opens a new window (even if I specify the target="_self" attribute), and the javascript reload() fails silently. If I try to do a location.replace(location.href) or location.href=_someurl_, it opens a new window.
So my question : how can I get IE to replace the current document in a modal dialog window?
window.name = "SomeWindowName";
window.open("www.microsoft.com", "SomeWindowName");
...works. this must be used within the dialog window instead of location.replace
A solution that handles the <form> part of the problem : add
<base target="_self" />
in the <head> section of the page.
It doesn't resolve the javascript issue, though.
window.name="SomeWindowName";
window.open("www.microsoft.com","SomeWindowName");
I just run into the same problem with Internet Explorer 8, so after playing around with it for a while it seems that there are some solutions such as
location.reload();return false;
or
window.location = window.location;
or
window.location.reload(true);
However, none of them work for me - either nothing happens, or, best case, a new window opens.
What I've come up with as some kind of workaround is to use
document.forms[0].submit();
It may not work for all constellations as you need a form on your page (and make sure that the form submission does not perform any unwanted changes), but it worked for me. Also make sure that you don't forget to put the
<base target="_self" />
into the header of your page as described by Alsciende.
HTH
G.
Related
I have a page which opens a second tab in IE11 and then in the second tab i want to be able to click a button and have that cause the first tab to load a different page. I am including a simple example which works correctly in Chrome, but not in IE11.
In the code below i explicitly set the window.name of the first tab to PascalPage, and even though i reference this name in the window.open call in page2.html it loads the Google page in the page2.html tab instead of the page1.html tab
Page 1.html
<html>
<head>
<title>Page1</title>
<script>
this.window.name="PascalPage";
function doStuff() {
window.open("page2.html", "_blank");
}
</script>
<head>
<body>
<button onclick="javascript:doStuff();" value="button">Button</button>
</body>
</html>
Page2.html
<html>
<head>
<title>Page2</title>
<script>
function doStuff() {
window.open("http://www.google.com", "PascalPage");
}
</script>
<head>
<body>
<button onclick="javascript:doStuff();" value="button">Button</button>
</body>
In my Internet Settings options the selected option is to allow IE to decide how to handle tabs.
Can anyone help?
I found the answer...
function loadUrlInTab(targetwindowname, url) {
//open the url in the targetwindowname or new tab if the target window isnt already open
winref = window.open('', targetwindowname);
winref.location.href = url;
winref.focus();
}
The window.open() call returns a reference to the window with 'targetwindowname' and then its a simple case of setting the location for that window.
PS. I found that in Chrome the instruction to focus() works, but in IE11 it doesn't. But that is a minor issue overall.
My page contains this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5; URL=http://www.example.com">
</head>
<body>
test
</body>
</html>
It redirects in Chrome, but not in Firefox. Why not?
In Firefox autorefresh has been disabled by default.
To enable autorefresh in your browser:
type about:config in the location bar of your webbrowser
a message appears: click to accept
search for blockautorefresh
change accessibility.blockautorefresh from false to true
It would be best to use alternatives such as a JavaScript or PHP Redirect.
JavaScript
window.setTimeout(function() {
window.location.href = 'http://www.google.com';
}, 5000);
PHP
header("refresh:5;url=wherever.php");
On Firefox the auto refresh is disabled by default.
You can configure Firefox manually by entering "about:config" in the browser's address bar. A warning message will appear; click on "I'll be careful, I promise!" to be able to continue.
Next, type "Accessibility.blockautorefresh" in the search box at the top of the page. Double-click the "true" value next to this preference to set it to "false" and allow the browser pages to auto-refresh.
Or use Javascript to redirect to the page.
window.setTimeout(function() {
window.location.href = "https://www.google.com/";
}, 2000);
Or you can add one line code to the body tag:
<body onload="setTimeout(location.href='https://www.google.com/', 2000)">
<html>
<script type="text/javascript">
function openWin(url) {
window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=200, left=300, width=870, height=650");
}
</script>
Content 2
Content 3
</html>`
this is my code to open to javascript popup. but when i click content 2 only one popup should open ` but here instead multiple popups are opening. and also parallely content 3 window should open in a diff window.
You don't want to supply javascript on the href attribute, instead use onclick.
Content 2.
Also, you are missing some necessary tags in your HTML document. You are missing the required body tag for example. You can check your document for syntax and to some extend semantic errors by using the W3C HTML validator.
You know those webcams you can control over the internet? When you push the button to go left, it moves to the left.. but nothing else happens on the page.. Thats what I need to create.
I have a page that allows me to control lights in my house. When I click the button, I now have it load the php script (that controls the light) in a separate frame.. but I want to get rid of this. So basically I want to create a link that will call the php in the background, but that link won't do anything to the page its on.
Any ideas?
Use a return false; in the click event:
Not Follow the Link
Explanation
The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.
The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.
You will need to use ajax to achieve such a behavior.
Links that don't do anything are basically HTML links where you bind the onclick event to a JavaScript function which returns false. This makes the links "do nothing" but still executes the JavaScript which tells the camera to go left/right.
HTML 5 let's you officially use anchor elements without a href attribute. But I would just bind a Javascript event listener to whatever element your already have. I'd even add these kind of interactive elements themselves to the DOM with Javascript, since they don't serve any purpose if a user has JS disabled.
...
will give you text that looks like a link.
If it's not really a link you may wish to consider a different kind of styling to emphasize the point and so that other underlined links show as links and this shows as something else. All depends on your needs and the situation.
I like jquery...
You will notice that the onclick function returns false. This is to stop the link from working...
<a onclick="do_it(this)" ...
then in your js
function do_it(anchor)
{
jQuery.ajax(
{
url : anchor.get_attribute('href'),
data : {whatever},
type : 'POST',
success : function(data)
{
alert('woo');
}
}
)
return false;
}
Pretty much what I'm doing here is:
So when the anchor is clicked jquery POSTs to the anchor's url. You can include data if you need to. This happens asynchronously so nothing happens on your page until jQuery gets response html(or whatever). If you want to do anything with the response you can get hold of it in the success function.
When the function returns it returns false, thus preventing the anchor from doing it's usual thing.
you talking about the javascript, create a onlick event / function and implement AJAX in specific DIV area
please check this out:
http://www.w3schools.com/ajax/ajax_examples.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//You need `ajax_info.txt` file with some content
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
You can use the following jquery solution:
HTML:
Move lights to left
JQUERY:
<script type="text/javascript">
$(document).ready(function() {
$('#link1').click(function(e) {
e.preventDefault();
$.ajax( $(this).attr('href') );
});
});
</script>
Can't believe no one has posted this yet. just use javascript void:
some click function
Its one of the oldest tricks in the book!
You need Ajax to retrieve datas from PHP without loading another page.
To "disable" the link:
Link
Or:
Link
Or just write a normal link and use jQuery (or another library) to add the event:
$('a').click(function(event) {
// the code with ajax
event.preventDefault();
});
I am newbie as far as developing chrome extension is concerned.
I am testing an extension. In this i have a background page and options page. In options page i am storing user entered password in local storage which i want to retrieve in the background page that is on click of browser icon.
My options page is :
<html>
<head>
<title>Options for Password</title>
<script>
function savePassword()
{
window.localStorage.setItem('password', txtPassword.value);
}
</script>
</head>
<body >
<h1>Enter Password</h1>
<input type='password' name='txtPassword' id='txtPassword'/>
<br />
<button onclick='savePassword();'>Save</button>
<br />
</body>
</html>
And my background page is:
<html>
<head>
<script>
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {code:"alert('password from tab:'+window.localStorage.getItem('password'));getfeedback_dialog_submitButton.setAttribute('onclick', 'if(gettext.value==\'"+window.localStorage.getItem(password)'+"\'){document.body.removeChild(getfeedbackcontainer);document.body.removeChild(getfeedbackoverlay);}');"});
});
</script>
</head>
</html>
When i save password through options page and then i click on browser action then i am getting the alert password from tab:null.
I am confused how to retrieve the value stored in the local storage?
Your code gets the localStorage value from the page where the browser action is clicked, where it is null. Change your quotes to get it at the background page:
chrome.tabs.executeScript(null, {code:"alert('password from tab:"+window.localStorage.getItem('password')+"');"});
Note that this may allow for code injection.
EDIT: Do this, it should work as long as your variables are defined properly and window.localStorage.getItem('password') is expected to be a string:
chrome.tabs.executeScript(null, {code:"alert('password from tab:"+window.localStorage.getItem('password')+"');"
+"getfeedback_dialog_submitButton.addEventListener('click', function(event){if(gettext.value=='"+window.localStorage.getItem('password')+"')"
+"{document.body.removeChild(getfeedbackcontainer);document.body.removeChild(getfeedbackoverlay);}},false);"});
I split your code into multiple lines for readability.