I am having issues opening a new tab in Safari browser with my extension.
Using the Extension Builder I added bar.html:
<html>
<body>
<form id="myForm">
<input type="button" value="Button1" onclick="window.open('http://www.google.com')"/>
<button onclick='window.open("https://www.google.com", "_blank");'>Button2</button>
</form>
</body>
</html>
Neither of Button1 nor Button2 will open 'google.com' in a new tab, nor window. If I put them in a form as above, and click on Button2 it will open my bar.html in the current tab, and from there if I click either Button1 or Button2 it will open 'google.com' in my current tab.
Have you tried to use target_blank?
https://www.w3schools.com/tags/att_a_target.asp
I found this in Apple Dev library and it states "The standard window.open() method cannot be used to open a new tab and window from an extension bar. Instead, extension bars have access to the SafariApplication, SafariBrowserWindow, and SafariBrowserTab classes, which allow you to open, close, activate, and manipulate windows and tabs."
So by using a function with safari.self.browserWindow.openTab I was able to open my link in a new tab.
<!DOCTYPE HTML>
<html>
<head>
<title>Safari Developer Reference</title>
<button onclick="openInTab('http://www.google.com');">Click me</button>
<script type="text/javascript">
function openInTab(source){
var newTab=safari.self.browserWindow.openTab();
newTab.url=source;
}
</script>
</head>
<body style="color:#C02020;background:#C0C0C0;">
Google
</body>
Related
I want to have a button on a page that links to a .pdf in a new tab (easy enough) but I also want that button to trigger the loading of a new url in the original tab. (So when the user closes the tab with the .pdf they see a new page has loaded in the original tab underneath.) Possible?
<a href="https://w3schools.com/" onclick="openNewTab()">
<button type="button">Click me btn</button>
</a>
<script>
function openNewTab() {
window.open('https://google.com', '_blank').focus();
}
</script>
Is there not a working method to upload a file from edge / internet explorer? I am using the following on my site for html input tag:
<label for="userfile"><a>add</a><input id="userfile" name="userfile" type="file" style="display:none"/></label>
When you click on "add", the open file box pops up, but nothing is returned in console (see javascript code below). This code runs fine in Chrome, and displays results in console with no issue.
$('#userfile').on('input', function() {
var test_test = $('#userfile')[0].files[0];
console.log($('#userfile')[0].files[0]);
}
Based on my testing result, I find that on input is not working in IE and Edge.
you can try to replace on input with on change. It can work with IE and Edge.
Note that chnage event will only execute when there is change in file input. If user select the same file than it will not fire it.
Other thing I noticed that Label For is not working for IE. So in IE, You need to make HTML file input visible and click on it to execute the code.
Modified code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#userfile").on("change", function() {
var test_test = $('#userfile')[0].files[0];
console.log($('#userfile')[0].files[0]);
});
});
</script>
</head>
<body>
<label for="userfile"><a>add</a></label>
<input id="userfile" name="userfile" type="file" />
</body>
</html>
Output in IE 11:
Output in MS Edge:
you can try to find any work around for Label for or you can simply add a extra button and try to execute a code on click of that button may help you to solve the issue.
Anyone looking to use a custom button so that the input file works across most browsers, please take a look at this JS fiddle. This is exactly what I needed.
JS FIDDLE
<div class="file-input-wrapper">
<button class="btn-file-input">Mah Custom Uploadz Button</button>
<input type="file" name="file" />
</div>
I ended up changing the width and height and I made the button very small so that it wasn't taking up to much space on my site. Hope this helps someone.
I've been running into a problem with touch events and content in an iframe on mobile safari. I have a text input box inside the iframe that a user can type in. On the main page, outside the iframe, there's a container with a touchstart event listener. If you start typing in the input box, then scroll around the page triggering the touchstart event, you will then no longer be able to type in the input box. The cursor is still there and blinking, the keyboard is still displayed, keyup events continue to fire, but the characters simply don't show up in the input box.
Here are two stripped down files to display the problem:
test.html:
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
<div id="test" style="height:200px;"></div>
<iframe src="test2.html"></iframe>
<script type="text/javascript">
var test = document.getElementById('test');
test.addEventListener('touchstart', function(){ console.log('touchstart'); });
</script>
</body>
</html>
test2.html
<html>
<body>
<input id="input" type="text">
<script type="text/javascript">
var input = document.getElementById('input');
input.addEventListener('keyup', function(){ console.log('keyup'); });
</script>
</body>
</html>
If you remove (or comment out) the touchstart event listener, everything works just fine. I put some console.log statements in there just to show which events are firing and when.
I have found some discussion of similar problems (such as Touch events on parent document fire hover states in iframe in mobile safari. Is this a bug? Is there a workaround?), but haven't found anyone who's come up with an explanation or a workaround. Has anyone else run into this problem, and have you figured out a way to workaround it? It appears to be a mobile safari issue only, it works fine on android.
I want to develop a login HTML page that will contain both signup and sign-in buttons . In the HTML page at run time i have the option to select any of the button (sign-in/sign-up). On clicking on the signup the page should redirect to a Signup JSP program and by clicking on sign-in page the page should redirect to a login Servlet program . Now The problem is that which page(JSP/SERVLET) I have to mention in action method of form in html page. ? How to resolve this issue?
You can just insert text
example:
Sign In
Sign Up
It should be simple hyperlink [GET], You don't need to submit form for that
<!--sign in button code -->
<!--sign up button code -->
If you want to use button then you have to go through jQuery or javascript events such as onClick of the button. here is few example. exactly what you need. You dont need to do that by form action submit.
<html>
<head>
<script>
function open_win()
{
window.open("http://yoururl.com");
/*or
window.location.href = "/yourpathToPageOrServletIfany/yourfiel.jsp.html.phpOrYourServletMapping";
*/
}
</script>
</head>
<body>
<input type="button" value="Open Window" onclick="open_win()">
</body>
</html>
the same thing is possible with the jquery $('#buttonId').click(function(){...in here ...});
I'm writing autotests with Watir-WebDriver and Ruby 1.9.2 on Ubuntu for the web. I have some iframe with several elements. I need to click on the items and check what happens. The <iframe> looks like:
<iframe id="iframe" align="top" some_attribute="some_attribute">
<html>
<head>
<title> Some title </title>
</head>
<body>
<div>
<button id="id_button" type="button" class="some_class"/>
</div>
</body>
</html>
</iframe>
When I click on the button, it should create the menu. But when I click on the button with watir-webdriver, nothing happens, as if he did not pressed. Watir don't print any exceptions, but do not press the button.
This problem persists only for Internet Explorer. For Firefox and Chrome, there is no problem. My code looks like:
browser = Watir :: Browser.new (: remote,: url => "http://some_ip:4444/wd/hub",: desired_capabilities =>: internet_explorer)
browser.goto ("http://some_http.com")
browser.iframe.button (: id, "id_button"). click
If I write
browser.iframe.button(: id, "id_button").attribute_value("class")
It's returning "some_class". This indicates that the item is recognized, but still nothing happens.
Please try this code
browser.iframe(:id, "iframe").button (: id, "id_button").click
if you need more information, check this link
http://wiki.openqa.org/display/WTR/Frames
Have you tried using a javascript command?
Eg:
browser.iframe.button(:id, "id_button").fire_event("onclick")
If that doesn't work, try debugging using IRB.
PS: I would write it as follows:
browser.iframe(:id, /iframe/).button(:id, /button/).fire_event("onclick")