Chrome瀏覽器：事件處理程序onClick到Facebook分享器

所以我現在很麻煩，我必須在3天內完成項目，並且我被卡在Chrome擴展的鏈接中。Chrome瀏覽器：事件處理程序onClick到Facebook分享器

項目：

，顯示在當前選項卡的所有avaible圖像，使份額幾個社交網絡

谷歌瀏覽器擴展。

現在我的分機得到的所有圖片，絕對或動態路徑，從當前選項卡，並在popup.html顯示他們，我需要與Facebook商標在該網站的圖像的右側添加圖像它鏈接到sharer.php

即時通訊使用angular.js framwork。我的文件：

Popup.html - 這是顯示圖像的div。

<script src="js/lib/jquery-1.8.2.min.js"></script> 
    <script src="js/lib/angular.min.js"></script> 

    <script src="js/app/app.js"></script> 
    <script src="js/app/popup.js"></script> 
    <script src="js/app/bindclick.js"></script> 
<div ng-controller="PageController"> 
      <div>{{message}}</div> 
      <h2>Page:</h2> 
      <div>{{title}}</div> 
      <div id="url">{{url}}</div> 
      <h2>Has Links:</h2> 
      <ul> 
       <li ng-repeat="pageInfo in pageInfos"> 
        <div><img src={{pageInfo}} class="imagemPopup"/><img src="http://formaemflor.com.br/loja/skin/frontend/default/perfume/images/facebook_icon.png" class="fblink" style="width: 50px; height: 50px"/></a></div> 
       </li>      
      </ul> 
     </div>

content.js

//alert('content script loaded'); 

chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) { 

    if (request.action == 'PageInfo') { 
     var pageInfos = []; 

     $('img').each(function() { 
      pageInfos.push($(this)[0].src); 
     }); 
     sendResponse(pageInfos); 
    } 
});

popup.js

myApp.service('pageInfoService', function() { 
    this.getInfo = function(callback) { 
     var model = {}; 

     chrome.tabs.query({'active': true}, 
     function (tabs) { 
      if (tabs.length > 0) 
      { 
       model.title = tabs[0].title; 
       model.url = tabs[0].url; 

       chrome.tabs.sendMessage(tabs[0].id, { 'action': 'PageInfo' }, function (response) { 

        model.pageInfos = response; 

        callback(model); 
       }); 
      } 

     }); 
    }; 
}); 

myApp.controller("PageController", function ($scope, pageInfoService) { 

    pageInfoService.getInfo(function (info) {   
     $scope.title = info.title; 
     $scope.url = info.url; 
     $scope.pageInfos = info.pageInfos; 

     $scope.$apply(); 


    }); 
});

我想事件處理程序適用於bindclick.js，它應該是這樣的。

document.getElementById('.fblink').addEventHandler('click', function(){ 
var url='http://www.facebook.com/sharer/sharer.php?u='+pageInfo.url; 
chrome.tabs.create({ url: url }); 
});

我嘗試了所有的事情，但我無法讓onclick事件工作，你可以給我代碼嗎？我真的需要一個懂得Chrome擴展的人的幫助，如果可能的話加我Skype，這樣我就可以學會快速beirao94

來源

2013-07-18 João Beirão

首先，fblink是一個類，而不是id，所以getElementById不起作用。使用document.querySelector或document.querySelectorAll來做到這一點。

而且你似乎在使用AngularJS，這些鏈接將由AngularJS（在<li ng-repeat=...>塊內）生成。您必須使用ng-click屬性以AngularJS方式處理點擊事件。有關更多信息，請參閱http://docs.angularjs.org/tutorial/step_10。

來源

2013-07-19 00:58:21

所以我應該這樣做？

您需要定義一個$ scope.fblinkClick（例如）函數，並在其中調用chrome.tabs.create，並將ng設置爲點擊」fblinkClick （pageInfo.url）」。 –

它不會工作，ng-click它是一個控制器的點擊，這意味着，而不是在圖像中的點擊事件，它在擴展圖標中，我點擊圖標彈出窗口變得可見和一個新的窗口使用所有圖像的facebooksharer創建..它很容易修復的圖像，這是一個數組，如此惡劣只是使用pageInfos [0] ....，但我仍然無法獲得每個圖像可能的點擊 –

方覺說，我來和大家分享一下解決方案。

所以angularjs有一個名爲NG單擊功能，所以我們做的是在popup.html

<img src="http://formaemflor.com.br/loja/skin/frontend/default/perfume/images/facebook_icon.png" class="fblink" ng-click"sharefb(pageInfo)"/>

現在在popup.js的CONTROLER裏面我們做

$scope.sharefb = function($url){ 
     chrome.window.create({url: 'http://www.facebook.com/sharer/sharer.php?u='+$url}); // or 
     chrome.tabs.create({url: 'http://www.facebook.com/sharer/sharer.php?u='+$url)]; 
};

所以我們可以輕鬆地在html代碼中調用JavaScript函數，即使使用清單v2也是如此。

來源

2013-07-22 20:06:18

Chrome瀏覽器：事件處理程序onClick到Facebook分享器

回答

相關問題