My JavaScript file has this code:
Obj.scrollLeft = Obj.scrollWidth;
This code is text-scrolling code. This code doesn't work in Microsoft Edge. Other browsers work fine.
Microsoft Edge:
Google Chrome:
=========================================================================
I'll share my example script.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<script>
function textScroll()
{
var inputObj = document.testFrm.text1;
inputObj.scrollLeft = inputObj.scrollWidth; //text scrolling
}
</script>
</head>
<body>
<form name="testFrm" >
<input id="text1" type="text" size="10" value="wwwwwwwwwww123456789" />
</form>
<button type="button" onclick="javascript:textScroll();">Scrolling text</button>
</body>
</html>
Run this script in Chrome and edges.
The results will differ from each other.
I want to know my JavaScript code why it does not operate in MS Edge.
Thank you.
It is supported in Edge.
Here is the version I used to validate it.
Also, it is having this behavior without having to do anything specific in the JS code.
Related
I want to show the file dialog once the page is loaded.
I tried using JS to trigger the click event on the file input in jQuery document ready event. But this approach only works in IE11, it doesn't work in Chrome (41.0.2272.118).
How can I make it work in Chrome?
Here is my code which doesn't work in Chrome but work in IE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body >
<input type="file" id="a" />
<script>
$(document).ready(function () {
Go();
});
function Go() {
var input = $('input');
input.click();
console.log('Gooooooooooooooo');
}
</script>
</body>
</html>
IE will allow you to trigger a .click event on a type='file', but most other browsers will not, for security reasons. However, there is a solution that might work for you.
No straight ways of triggering it with onload().
Onload is only supported by the <input type = "image"> tag. See here.
+1 #william.taylor.09's proposition.
My concept is to update the value of the text box in the main page from the iframe . This code is working in firefox , but not working in Internet Explorer and Chrome . Both main.html and frame.html are in same location . I need suggestions to make it work in all the browsers .
main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
</head>
<body>
Parent textbox :<input type="text" id="parentbox"></br></br></br>
<iframe src="frame.html" ></iframe>
</body>
</html>
frame.html
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function PushValues()
{
var frame_value = document.getElementById("framebox").value;
window.parent.document.getElementById("parentbox").value =frame_value;
}
</script>
</head>
<body>
<input type="text" id="framebox" >
<input type="button" value ="fill" onclick="PushValues()">
</body>
</html>
As per security policies, cross-domain access is restricted. This will happen if you are trying to show a page from domain 1 in domain 2 and try to manipulate the DOM of page in domain 2 from the script in domain 1. If you are running the pages from same location on a server. This shouldn't happen. However, if you are just saving them as HTML files and trying to open them in your browser, it should not work. I have created two jsbins for your code and it is working on chrome. Try to access them using the below links.
Main.html: http://jsbin.com/afazEDE/1
iframe.html: http://jsbin.com/ayacEXa/1/
Try to run main.html in edit mode in JSBin by keeping console open in chrome (F12) and click fill button. It will not work and will show you the error. If you run them as it is (in run mode of JSBin), it will work.
Jquery -
function PushValues()
{
var frame_value = $('#framebox').val();
parent.$('body').find('#parentbox').val(frame_value);
}
It's always work for me.
Run this code on a server like xamp or wamp it wont work directly
Main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
Parent textbox :<input type="text" id="parentbox" value=""></br></br></br>
<iframe src="iframe.html"></iframe>
<script>
window._fn = {
printval: function (response) {
$("input").val(response);
},
};
</script>
</body>
iframe
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" id="framebox">
<input type="button" value="fill" onclick="PushValues()">
<script language="javascript">
function PushValues() {
window.parent._fn['printval']($('input').val());
}
</script>
</body>
</html>
Since you're using jQuery try this
var frame_value = $('#framebox').val();
$('#parentbox', window.parent.document).val(frame_value);
You should try P3P policy which is highly related to iframes and Internet Explorer.
response header set to the iframe document
header key= 'P3P' header value: 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'
I'm no js expert but I've minimised my faulty script and tried to localise the fault without success. You can find the actual page at www.trinitywoking.org.uk. but my minimal test case is
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>MinTestCase</title>
<script>window.onload = function () { // Don't run script until page is loaded
var votd = new Array();
votd[129]="Mount Sinai was all smoke because God had come down on it as fire.";
// Prepare today's string for display
document.getElementById("keyverse").innerHTML="<p> " + votd[(129)] + "</p> ";
}
</script>
</head>
<body>
<h1>Target paragraph follows </h1>
<p id="keyverse">
</p>
</body>
</html>
This runs and displays correctly on all browsers except IE lte 8.
A second script runs on all browsers so it doesn't look like a permissions issue.
I'll be very grateful for any help with this.
Thanks.
Remove the <p> tags in document.getElementById() line:
document.getElementById("keyverse").innerHTML=votd[(129)];
There are already tags where you try to edit the innerHTML. IE is a very picky browser.
In FireFox, using JavaScript, when a user presses enter to select "ok" on an alert Window the onkeyup get fired. In Internet Explore this does not happen.
This HTML code demonstrates what I'm saying. Open it, type a character in the text field and select "ok" by pressing enter. Try it in FireFox and IE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS example</title>
<script type="text/javascript">
function popup()
{
alert("bam")
}
</script>
</head>
<body>
<form>
Each inputted character causes an alert window:<input type="text" onkeyup="popup()" />
</form>
</body>
</html>
Is this as designed or is this a problem? How do you prevent FireFox from firing again?
EDIT: I found it on bugzilla, does bugzilla have a "vote-up" or equivalent feature? This through me astray when trying to trouble shoot and I was looking for infinite loop/recursion in the function that was being called.
This is because Firefox destroys its alerts much more quickly than other browsers, and it's possible for the focus to return to your field while the Enter key is still down. It's possible to reproduce this in other browsers by holding the Enter key down a bit longer.
So, I would like to be able to have people click on a link, and the an input field with a file will open. But I only want this to happen if the browser has support for it. As pointed out in this answer, chrome supports this. Firefox 3.6 does not, but Firefox 4 should.
I know you can frequently test for support of features in javascript, but I'm unsure how to test for this feature.
If you'd like to see what I mean, the below code shows the feature when clicking on the link. You can also play with this on my page.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Field Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var clicker = document.getElementById('clicker');
var uploader = document.getElementById('uploader');
clicker.addEventListener("click", function(e) {
uploader.click();
e.preventDefault();
}, false);
});
</script>
</head>
<body>
<form>
<input type="file" id="uploader">
</form>
Should click the uploader
</body>
</html>
Things that do not work:
testing !uploader.click
seeing if uploader.click() throws an exception
You could use JQuery to dynamically write the HTML into the document at the appropriate place
$("#mylinkID").after('Whatever');`
and the link would be added after the element that contained the ID "mylinkID". If no support for JS, the link doesn't get displayed.