I've created a Browser Extension for Chrome. I have added an HTML Table to the browser_action.html as a Popup as shown below.
What I want is, when I click on a Table Cell, it should take me to a link. Different links when clicked on different cells.
This is part of my code :
<tr>
<td class="tg-z3w6 hvr-underline-from-center">TEST</td>
<td class="tg-ges6">2715</td>
</tr>
But it doesn't work. Any idea why? or a workaround for this issue?
In your popup.html assuming you are using jquery-
$(document).ready(function(){
$('body').on('click', 'a', function(){
chrome.tabs.create({url: $(this).attr('href')});
return false;
});
});
Here is my solution for my own question.
Create popup.js and link it in the page:
<script src="popup.js" ></script>
Add the following code to popup.js:
document.addEventListener('DOMContentLoaded', function () {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
(function () {
var ln = links[i];
var location = ln.href;
ln.onclick = function () {
chrome.tabs.create({active: true, url: location});
};
})();
}
});
That's all, links should work after that.
TEST should be between <a>and </a>.
it's so easy you just need to add target="#" to your a tag
like
<td class="tg-z3w6 hvr-underline-from-center"><a href="http://ew/Environment/Detail?envid=2715" target="#" ></a>TEST</td>
Related
I've been looking through the Stackoverflow questions, trying to get help with a simple link delay; I want to put it around a div, and I can't make heads or tails of the examples I've found.
So far, I understand that I need to halt the native function of href, but I don't know how to do that. The code is still very alien to me. Help?
Set your href attribute as href="javascript:delay('URL')" and JavaScript:
function delay (URL) {
setTimeout( function() { window.location = URL }, 500 );
}
If you want to delay every link on your page, you can do it with jQuery like this
$(function(){
$("a").click(function(evt){
var link = $(this).attr("href");
setTimeout(function() {
window.location.href = link;
}, 500);
});
});
I use this to keep the function waiting before continuing:
var wait_until = new Date().getTime() + 500;
while (new Date().getTime() < wait_until) {
//Do nothing, wait
}
To delay a link with inline javascript, just
set your href attribute as href="javascript:setTimeout(()=>{window.location = 'URL' },500);".
When you replace the URL with your link, just make sure it is inside the ' '.
<li class="nav-item">
<a href="javascript:setTimeout(()=>{window.location = '#About' },500);">
About Me
</a>
</li>
If you want to open on a new tab (target="_blank"),
This would be #gurvinder372's code changed to account for the new tab:
If you want to use any other target setting, just change the "_blank" to your preferred setting.
function delay(URL) {
setTimeout(function () {
window.open(URL, "_blank"); // this is what I've changed.
}, 500);
}
My code have the main windonw and one iframe and each one with your module. A button in main window fires click event that should append html into iframe, the new html when appended into that should apply interceptors and directives properly, but it doesn't work!
Angular javascript:
angular.module('module1',[]).controller('Controller1', function ($scope) {
$scope.get = function(){
$http.jsonp("some_url_here").success(function(html){
$scope.content = html;
});
}
}).directive('click', function($compile) {
return {
link: function link(scope, element, attrs) {
element.bind('click',function(){
var unbind = scope.$watch(scope.content, function() {
var div=document.getElementById("frame").contentWindow.angular.element("divId");
div.append($compile(scope.content)(div.scope()));
unbind();
});
});
}
}
});
angular.module('module2',[]).directive('a', function() {
return {
restrict:'E',
link: function(scope, element, attrs) {
console.log('ping!');
console.log(attrs.href);
}
};
});
Html code:
<html ng-app="modile1">
<div ng-controller="Controller1">
<button type="button", ng-click="get('any_value')", click:""/> Load frame
</div>
<iframe id="frame" src="/please/ignore/this">
<!-- considere the html as appended from iframe-src and contains ng-app="module2" -->
<html ng-app="module2">
<div id="divId">
<!-- code should be inject here -->
</div>
</html>
</iframe>
</html>
Please, considere that angularjs, jquery if applicable, modules-declaration as well as headers are loaded properly.
I'd like to load the html content from main-frame/window into iframe and run interceptors and directives properly. Is it possible? If yes, how can I do it?
Thanks for advancing!
I've tried this code and it seems work fine! I found it here: http://www.snip2code.com/Snippet/50430/Angular-Bootstrap
var $rootElement = angular.element(document.getElementById("frame").contentWindow.document);
var modules = [
'ng',
'module2',
function($provide) {
$provide.value('$rootElement', $rootElement)
}
];
var $injector = angular.injector(modules);
var $compile = $injector.get('$compile');
$rootElement.find("div#divId").append(scope.content);
var compositeLinkFn = $compile($rootElement);
var $rootScope = $injector.get('$rootScope');
compositeLinkFn($rootScope);
$rootScope.$apply();
Lately, I'm having trouble with jQuery click events. In this example, I'm wanting to use ajax post when an user clicks on a list item. No errors pop up on Firebug and the jquery script is in the code. When I run the code, nothing happens. The code is below.
<script type="text/javascript" >
$('#pop').click(function() {
var pop = 'pop';
$.post('ajax_file.php', {
style: pop
}, function(data) {
$('#tube').html(data);
});});
</script>
<ul>
<li id="pop">Pop</li>
</ul>
Try this:
$(document).ready(function(){
$('#pop').click(function() {
var pop = 'pop';
$.post('ajax_style_homepage.php', {
style: pop
}, function(data) {
$('#tube').html(data);
});
});
})
Wrap it in the document ready function and see what happens. Also you dont need to empty. You can call the html method and it will overwrite the content.
$(function(){
$('#pop').click(function() {
var pop = 'pop';
$.post('ajax_style_homepage.php', { style: pop}, function(data) {
$('#tube').html(data);
});
});
});
Just another way to do the same thing as the 2 other answers without binding your click method at page load. Simply set your onclick attribute on your list item to a function containing your ajax call. This is easier to follow in my opinion.
<script type="text/javascript" >
function makeAJAXPost(){
var pop = 'pop';
$.post('ajax_file.php', {
style: pop
}, function(data) {
$('#tube').html(data);
});
}
</script>
<ul>
<li onclick="makeAJAXPost()" id="pop">Pop</li>
</ul>
I'm doing a Chrome extension and I got helped in this post here.
My problem now is how to open a new tab of chrome that has as URL the link I clicked in the popup.html. I tried to do like someone suggested in their answers in other similar question like setting <a>'s attribute target to _blank but the only result is that chrome does open a new tab but in the new tab is my popup.html.
Any idea how to solve this?
Thanks.
You should use chrome.tabs module to manually open the desired link in a new tab. Try using this jQuery snippet in your popup.html:
$(document).ready(function(){
$('body').on('click', 'a', function(){
chrome.tabs.create({url: $(this).attr('href')});
return false;
});
});
See my comment https://stackoverflow.com/a/17732609/1340178
I had the same issue and this was my approach:
Create the popup.html with link (and the links are not working when clicked as Chrome block them).
Create popup.js and link it in the page: <script src="popup.js" ></script>
Add the following code to popup.js:
document.addEventListener('DOMContentLoaded', function () {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
(function () {
var ln = links[i];
var location = ln.href;
ln.onclick = function () {
chrome.tabs.create({active: true, url: location});
};
})();
}
});
That's all, links should work after that.
If you don't want to use JQuery, insert this into your popup.js and it will make all your links open in a new tab when clicked
Remember to declarer the "tabs" permission in the manifest.json
window.addEventListener('click',function(e){
if(e.target.href!==undefined){
chrome.tabs.create({url:e.target.href})
}
})
The other answers work. For completeness, another way is to just add target="_blank"
Or if you have want to "manually" add particular links, here's a way (based on the other answers already here):
popup.html
<a id="index_link">My text</a>.
popup.js
document.addEventListener('DOMContentLoaded', () => {
var y = document.getElementById("index_link");
y.addEventListener("click", openIndex);
});
function openIndex() {
chrome.tabs.create({active: true, url: "http://my_url"});
}
A bit more concise and actual syntax in 2020:
document.addEventListener('DOMContentLoaded', () => {
const links = document.querySelectorAll("a");
links.forEach(link => {
const location = link.getAttribute('href');
link.addEventListener('click', () => chrome.tabs.create({active: true, url: location}));
});
});
A bit more concise version in modern JS:
document.addEventListener('DOMContentLoaded', function () {
for (const anchor of document.getElementsByTagName('a')) {
anchor.onclick = () => {
chrome.tabs.create({active: true, url: anchor.href});
};
};
});
I had the same problem. Looked like Konrad's solution would worked, but it opened multiple tabs at once. This happened only after first extension install. So I changed it to
if (e.target.classList.contains("a-link")) {
chrome.tabs.create({url: $(e.target).attr('href')});
return false;
}
and all is working as expected.
Send tab url to share blog in new tab:
// popup.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs){
var url = tabs[0].url;
var title = tabs[0].title;
document.getElementById('linkQZone').onclick = function () {
var url1 = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + url + '&title=' + title + '&desc=&summary=&site=';
chrome.tabs.create({active: true, url: url1});
};
document.getElementById('linkQQ').onclick = function () {
var url1 = 'https://connect.qq.com/widget/shareqq/index.html?url=' + url + '&title=' + title + '&desc=&summary=&site=';
chrome.tabs.create({active: true, url: url1});
};
});
open with ctrl-click or middle-click
$('body').on('click auxclick', 'a', e => {
if (e.ctrlKey || e.button == 1) {
e.preventDefault();
chrome.tabs.create({ url: e.currentTarget.href, selected: false});
}
});
I'm trying to create a good looking product order form with jquery skills.
I have some shoe size values as like divs:
<div id="select-size">
<div id="size-value-19">39</div>
<div id="size-value-20">40</div>
<div id="size-value-21">41</div>
<input type="hidden" name="option[229]" id="option-size" value="">
</div>
When a customer clicks on a shoe size numbers it should take the size-value-?? part from div id and put it into #option-size hidden field.
How can I do that?
BTW: I had found a prototypejs example for this work but prototype and jquery can't work together properly.
Let me give the prototype example code for you:
<script type="text/javascript">
//<![CDATA[
document.observe("dom:loaded", function() {
function deActivate(elt) {
elt.removeClassName('active');
}
function watchClick(evt) {
var element = Event.element(evt);
if (element.hasClassName('outstock')) return;
$$('#select-size div').each(function(elt) {deActivate(elt)});
element.addClassName('active');
var eid = element.id.split('-')[2];
$('option-size').setValue(eid);
}
$$('#select-size div').invoke('observe', 'click', watchClick);
});
//]]>
</script>
I still can't believe that how js framework developers use same $ sign...
$('div').click(function(){
var id = $(this).attr('id');
$('#option-size').val(id);
});
Code presented by OP, translated to jQuery:
$(function() { // On DOM ready ...
var $sizes = $('#select-size div'), // Size elements
$input = $('#option-size'); // Hidden input
$sizes.click(function() { // On click on size element ...
var $this = $(this); // Reference to this element
if (!$this.hasClass('outstock')) { // If not out of stock ...
$sizes.removeClass('active'); // Remove .active on all
$this.addClass('active'); // Add .active on this
$input.val(this.id.split('-')[2]); // Set value in hidden field
}
});
});
(Updated demo)
On a general note:
You should be able to suppress jQuery's use of the $ symbol via the .noConflict() setting. However, it is advisable to translate the functionality into jQuery if this library is already present and you have no other use for prototypejs.
add jquery
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
and add this script to your page
<script type="text/javascript">
$(document).ready(function () {
$('#size-value-19').click(function () {
$('#option-size').val($(this).text());
});
$('#size-value-20').click(function () {
$('#option-size').val($(this).text());
});
$('#size-value-21').click(function () {
$('#option-size').val($(this).text());
});
});
</script>