Wonder if anyone can help. See attached code below:
If I launch a Web Intent via a normal "a href", and then tweet I get the callback. Lovely.
If, however, I launch a Web Intent via a window.open, say from a button click, I don't. See code below.
I could, trap the button click, and then call click on the "a href". At this point, I do then get the callback. However, this action in some browsers (e.g. Safari) gets caught in the pop-up blocker, so no-one sees the popup. Which is a bit useless.
I would like to use the window.open approach, and get the callback. Any thoughts anyone?
<!doctype html>
<html lang="en">
<head lang=en>
<meta charset="utf-8">
<title>Web Intent t3 Experiment</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://platform.twitter.com/widgets.js" type="text/javascript"> </script>
</head>
<body>
Option 1: Tweet via Link<br />
<button id="tf_sendtweet_button">Option 2: Tweet Via Button and JS</button>
<script type="text/javascript">
var t_element = d3.select("#tf_sendtweet_button");
t_element.on("click", function() {
_text = "Some compelling text to go in a tweet";
_url = "http://www.google.com/";
var tweet_url = 'https://twitter.com/intent/tweet?text=';
tweet_url += encodeURIComponent(_text);
tweet_url += '&url=' + encodeURIComponent(_url);
window.open(tweet_url,'_blank');
});
// Here, trap the callback from the WebIntent.
twttr.ready(function (twttr) {
// bind events here
twttr.events.bind('tweet', function (event) {
alert("Yay, tweet callback baby. Gotcha.");
console.log(new Date(), "Sweett, tweet callback: ", event);
});
});
</script>
</body>
</html>
Ok, everyone stand easy. It's been answered by a Twitter employee:
Unfortunately you can’t use the callback events features without letting our javascript control the window opening.
https://twittercommunity.com/t/get-web-intent-callback-from-a-window-open-call/20881
Related
I have a question we must have seen many a time that when we are about to close the window and Just hover mouse over the cross on Browser Tab, a pop up appears asking for us to subscribe or highlighting some coupon. This Functionality is based on which feature of the browser, does it exploits some PHP code or some artificial intelligence.
It is run on client-side as everything that interact with user interface.
The example bellow shows how to do this with pure javascript (not tested with all browsers, but works well with Chrome)
<!DOCTYPE html>
<html>
<head>
<title>Page exit example</title>
<script type="text/javascript">
var showMessage = true;
window.onmouseout = function(){
if(showMessage){
showMessage = false;
document.getElementsByTagName('body')[0].innerHTML = "Dont leave yet!";
}
};
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
I have the following jQuery in a user control using a Telerik RadGrid:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script type="text/javascript">
var warnMessage = "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save and Continue button, your changes will be lost. Are you sure you want to exit this page?";
$(document).ready(function () {
$('input:not(:button,:submit),textarea,select').change(function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage;
}
});
$('input:not(:button,:submit),textarea,select').on('DOMNodeRemoved', function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage;
}
});
$('input:submit').click(function (e) {
warnMessage = null;
});
});
</script>
What it's meant to do is to keep a user from clicking away from the page using several of these controls without saving their changes. When I run this in VS2013, it works fine, triggering the pop-up when anything is added/updated/deleted in the RadGrid and the user attempts to leave the page without saving. However after publishing to the test server,the .click is never hit, so when a user tries to add another entry to the grid, the warning message fires again, and the on DOMNodeRemoved never works. Is there something I'm doing wrong in the code? Or is there something wrong with the server? I'm new to jQuery, so any help would be greatly appreciated. I will post more info if needed.
After looking at the console fo rthe test-server site, I found I was getting an "object doesn't support property or method 'addeventlistener'" error. I went to the Master page of the site and added a meta to check for the compatibility mode and that fixed it right up.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script type="text/javascript" src="/Scripts/modernizr.js"></script></head>
UPDATE
After looking into this issue more, it's not that JQuery wasn't working per se, it was that the functionality did not exist for my solution to work in IE9.
I'm starting to experiment with building Chrome extensions (first exposure to HTML and Javascript as well) and got stuck on a basic task. I have the popup.html file, which is what the user sees. What I'd like to do is have some placeholder text that is initially displayed to the user. The popup will also have a button so that when the user clicks on the button the placeholder text is replaced with something else.
Here is what I tested:
popup.html:
<!doctype html>
<html>
<head>
<title>Test Extension</title>
<script src="popup.js"></script>
</head>
<body>
<form id="testForm">
<input id="testButton" type="submit" value="testButton" />
</form>
<h3 id="textHeader">This will change.</h3>
</body>
</html>
popup.js:
function changeText() {
document.getElementById('textHeader').innerHTML = 'Changed!';
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('testForm').addEventListener('submit', changeText);
});
When I debug the script, I see the initial addEventListener call which calls changeText and causes the text in the popup to change to 'Changed!'. However, I then see a second call of the addEventListener, which then reverts back to the original popup.html form. The net effect is that 'Changed!' only appears for a brief instant.
Is there a way to make changes to the HTML file in an event listener permanent to get the intended behavior? I realize that I really need to gain an understanding of the DOM model and how Javascript can interact with it in the browser. I'm looking for a book or some other resource to consult (the Mozilla Developer Network site looked like a good authoritative source, but seemed kind of sparse), but in the meantime was hoping to gain at least some additional understanding by working through this simple example. Thanks!
EDIT:
Thank you everyone for the prompt responses! Disabling the form submissions makes sense. I'm adding this edit to my question post because the original task I was trying to achieve did in fact need to make use of a form.
What I'm trying to do is take in input from the user through a form, query an external site (ex: Wikipedia) for the phrase that user typed in, and then display in the popup content that's taken from the query.
Here is a skeleton outline of what I attempted:
popup.html:
<!doctype html>
<html>
<head>
<title>Test Extension</title>
<script src="popup.js"></script>
</head>
<body>
<form id="WikipediaForm">
<input type="text" id="userQuery" size="50"/>
<input id="submitQuery" type="submit" value="Ask Wikipedia" />
</form>
<h3 id="WikipediaResponse">placeholder</h3>
</body>
</html>
popup.js:
function changeText() {
var req = new XMLHttpRequest();
askURL = 'http://en.wikipedia.org/wiki' + encodeURIComponent(document.getElementById('userQuery').value);
req.open("GET", askURL, false);
req.onload = function (e) {
if (req.readyState === 4) {
if (req.status === 200) {
document.getElementById('WikipediaResponse').innerHTML = req.responseText; // i'm just dumping everything for now
}
} else {
console.error(req.statusText);
}
}
};
req.send(null);
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('WikipediaForm').addEventListener('submit', changeText);
});
This again also faces the same issue that I saw with the previous example where the response flashes for an instant before reverting back to the placeholder text. However, I can't follow the earlier answers now because I need the form to be submitted. What is the usual way of changing content in an event listener for a form?
On another note, I'm using the synchronous XMLHttpRequest call, which I know isn't recommend. But when I used the asynchronous call it didn't seem to go through and I couldn't figure out how to fix that, so that's another problem I'm also working on.
Use:
function changeText() {
document.getElementById('textHeader').innerHTML = 'Changed!';
//Returning false will prevent that the form submission completes
return false;
}
But if your form is never going to send data anywhere, you don't need a form at all (unless you're going to use a reset button for your fields). So you can just add type="button" to your element.
<body>
<input id="testButton" type="button" value="testButton" />
<h3 id="textHeader">This will change.</h3>
</body>
You need to return false from the event handler to prevent the normal form submission after the handler runs:
function changeText() {
document.getElementById('textHeader').innerHTML = 'Changed!';
return false;
}
*Update: Ultimately I've decided that accomplishing exactly what I want here isn't possible due to the issues it poses to security. Kalle's answer below gives a solution that is closest to what I want to accomplish.
In order to solve my problem I've created scripts on both pages and will use a sort of push notification that is routed through the server in order for them to communicate.
Thanks for the help!! *
I have two pages. Both windows already exist independently. Page two has a function declared in JS.
I would like to be able to call the function in window two by clicking a link in window one.
Page 1:
<html>
<head>
<title>This is a title!</title>
</head>
<body style="background: lightblue">
Click Me!
</body>
Page 2:
<html>
<head>
<META HTTP-EQUIV="Window-target" CONTENT="my_target" />
<title>This is a title!</title>
<script type=text/javascript>
function clicked() {
alert('test');
}
</script>
</head>
<body style="background: lightblue">
</body>
Since it is on the same domain you can get this to work but would have to change the way you were doing it a little.
First off you would have to open it in a popup using this syntax rather than a new tab:
newwindow=window.open(url,'name','height=200,width=150');
and then you could simply call newwindow.clicked() after the popup is called.
update
just did a quick test and this will open it in a new tab. (sorry its been a while since I used the open function.
newwindow=window.open(url,'name');
Just noticed also that you should wait for the popup to load. So in my Example it would look a little something like this (with jQuery):
var newwindow = window.open('http://www.tylerbiscoe.com/vb/new.html');
$(newwindow).load(function(){
newwindow.clicked();
});
Ok, brand new answer. I hope this is what you were thinking. This is however, when you open page 2 from page 1.. So basically, page 1 would know who page 2 is..
Online example: http://kopli.pri.ee/stackoverflow/6832271.php
Page 1
<html>
<head>
<title>Page 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.ajaxlink {color: blue; cursor: pointer; border-bottom: 1px dotted blue;}
</style>
</head>
<body>
<span id="open_page_2" class="ajaxlink">Open new window</span>
<br>
<br>
Click Me!
<script>
$('#open_page_2').click(function(){
child = window.open('test2.php','page_2','width=600,height=600');
});
$('a[target=my_target]').click(function () {
child.SecondPageFunction();
return false;
});
</script>
</body>
</html>
Page 2
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Your seeing page 2!</h1>
<script>
function SecondPageFunction () {
alert('Second page action got triggered!');
}
</script>
</body>
</html>
The script must be a part of the page you're opening in the new window. You're absolutely correct about it being a security flaw if it was elsewise allowed.
You could add some query string argument that could be picked up onload by javascript in the page you are opening and call your function if the query string arg is present.
I allow the user to store a domain in local storage (e.g. http://192.168.1.104). My method of pulling the domain out of local storage is like this:
<script type="text/javascript">
domain = localStorage['domain'];
function DOMAIN(dive) {
window.location=domain+dive;
}
</script>
and I can open it like this:
CLICK HERE
or
CLICK HERE
but I can't seem to get it to allow opening in a new tab (chrome v13). It's driving me nuts, any suggestions?
Try this:
CLICK HERE
Lets see if this works for you:
CLICK HERE
Okay, I figured it out, but it's a little hacky and restless. Make a dummy html document, say /html/home.html for instance. Call the js-function inside the dummy doc:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Ripping Status</title>
<script type="text/javascript">
domain = localStorage['domain'] || '';
function init() {
window.location=domain+'/';
document.getElementById( 'box' );
};
</script>
</head>
<body onload="init();">
<div id="box"></div>
</body>
</html>
where 'domain' is stored as, say, http://192.168.1.101. Now, call /html/home.html inside the main html document via
CLICK HERE
and it allows right click > open new tab, window, etc as you would expect.