整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
先使用jQuery選擇器獲取到想要綁定click事件的img元素，然后可以直接綁定click方法，也可以通過bind方法綁定。這里詳細(xì)介紹一下bind方法。jQuery 事件 - bind() 方法 —— 定義和用法
html中如何給圖片添加點(diǎn)擊事件的詳解
bind() 方法為被選元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定事件發(fā)生時(shí)運(yùn)行的函數(shù)。
jQuery 事件 - bind() 方法 ——將事件和函數(shù)綁定到元素
規(guī)定向被選元素添加的一個(gè)或多個(gè)事件處理程序，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。
jQuery 事件 - bind() 方法——語法
1 $(selector).bind(event,data,function)
jQuery 事件 - bind() 方法——參數(shù)描述
event 必需。規(guī)定添加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件。必須是有效的事件。
data 可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
function 必需。規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。
實(shí)例：
1 //直接給所有img標(biāo)簽綁定click事件
2 $("img").click(function(){
3 alert('你點(diǎn)擊了圖片');
4 })
5
6 //使用bind方法綁定click事件
7 $("img").bind("click",function(){
8 alert('你點(diǎn)擊了圖片');
9 })
Html 的img標(biāo)簽添加點(diǎn)擊事件
1 package com.topnews;
2
3 import java.util.ArrayList;
4
5 import android.annotation.SuppressLint;
6 import android.app.Activity;
7 import android.app.Fragment;
8 import android.content.Context;
9 import android.content.Intent;
10 import android.graphics.Bitmap;
11 import android.os.AsyncTask;
12 import android.os.Bundle;
13 import android.text.TextUtils;
14 import android.util.Log;
15 import android.view.View;
16 import android.view.ViewGroup.LayoutParams;
17 import android.webkit.WebChromeClient;
18 import android.webkit.WebSettings;
19 import android.webkit.WebView;
20 import android.webkit.WebViewClient;
21 import android.webkit.WebSettings.LayoutAlgorithm;
22 import android.widget.Button;
23 import android.widget.FrameLayout;
24 import android.widget.ProgressBar;
25 import android.widget.TextView;
26
27 import com.topnews.base.BaseActivity;
28 import com.topnews.bean.NewsEntity;
29 import com.topnews.service.NewsDetailsService;
30 import com.topnews.tool.BaseTools;
31 import com.topnews.tool.DataTools;
32 import com.topnews.tool.DateTools;
33
34 @SuppressLint("JavascriptInterface")
35 public class DetailsActivity extends BaseActivity {
36 private TextView title;
37 private ProgressBar progressBar;
38 private FrameLayout customview_layout;
39 private String news_url;
40 private String news_title;
41 private String news_source;
42 private String news_date;
43 private NewsEntity news;
44 private TextView action_comment_count;
45 WebView webView;
46
47 @Override
48 protected void onCreate(Bundle savedInstanceState) {
49 // TODO Auto-generated method stub
50 super.onCreate(savedInstanceState);
51 setContentView(R.layout.details);
52 setNeedBackGesture(true);// 設(shè)置需要手勢監(jiān)聽
53 getData();
54 initView();
55 initWebView();
56 }
57
58 /* 獲取傳遞過來的數(shù)據(jù) */
59 private void getData() {
60 news = (NewsEntity) getIntent().getSerializableExtra("news");
61 news_url = news.getSource_url();
62 news_title = news.getTitle();
63 news_source = news.getSource();
64 news_date = 65DateTools.getNewsDetailsDate(String.valueOf(news.getPublishTime()));
66 }
67
68 private void initWebView() {
69 webView = (WebView) findViewById(R.id.wb_details);
70 LayoutParams params = new 71LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
72 if (!TextUtils.isEmpty(news_url)) {
73 WebSettings settings = webView.getSettings();
74 settings.setJavaScriptEnabled(true);// 設(shè)置可以運(yùn)行JS腳本
75 // settings.setTextZoom(120);//Sets the text zoom of the page in
76 // percent. The default is 100.
77 settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
78 // settings.setUseWideViewPort(true); //打開頁面時(shí)， 自適應(yīng)屏幕
79 // settings.setLoadWithOverviewMode(true);//打開頁面時(shí)， 自適應(yīng)屏幕
80 settings.setSupportZoom(false);// 用于設(shè)置webview放大
81 settings.setBuiltInZoomControls(false);
82 webView.setBackgroundResource(R.color.transparent);
83 // 添加js交互接口類，并起別名 imagelistner
84 webView.addJavascriptInterface(new 85JavascriptInterface(getApplicationContext()), "imagelistner");
86 webView.setWebChromeClient(new MyWebChromeClient());
87 webView.setWebViewClient(new MyWebViewClient());
88 Log.i("info", "news_url:" + news_url);
89 Log.i("info", "news_title:" + news_title);
90 Log.i("info", "news_source:" + news_source);
91 Log.i("info", "news_date:" + news_date);
92 new MyAsnycTask().execute(news_url, news_title, news_source + " " + 93news_date);
94 }
95 }
96
97 private void initView() {
98 title = (TextView) findViewById(R.id.title);
99 progressBar = (ProgressBar) findViewById(R.id.ss_htmlprogessbar);
100 customview_layout = (FrameLayout) 101findViewById(R.id.customview_layout);
102 // 底部欄目
103 action_comment_count = (TextView) 104findViewById(R.id.action_comment_count);
105
106 progressBar.setVisibility(View.VISIBLE);
107 title.setTextSize(13);
108 title.setVisibility(View.VISIBLE);
109 title.setText(news_url);
110 action_comment_count.setText(String.valueOf(news.getCommentNum()));
111 }
112
113 @Override
114 public void onBackPressed() {
115 super.onBackPressed();
116 overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right);
117 }
118
119 private class MyAsnycTask extends AsyncTask<string, string,="" string=""> {
120
121 @Override
122 protected String doInBackground(String... urls) {
123 String data = NewsDetailsService.getNewsDetails(urls[0], urls[1], urls[2]);
124 Log.i("info", "MyAsnycTask.data:" + data);
125 return data;
126 }
127
128 @Override
129 protected void onPostExecute(String data) {
130 webView.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);
131 }
132 }
133
134 // 注入js函數(shù)監(jiān)聽
135 private void addImageClickListner() {
136 // 這段js函數(shù)的功能就是，遍歷所有的img幾點(diǎn)，并添加onclick函數(shù)，在還是執(zhí)137 行的時(shí)候調(diào)用本地接口傳遞url過去
138 webView.loadUrl("javascript：(function(){" + "var objs = 139document.getElementsByTagName(\"img\");" + "var imgurl=''; "
140 + "for(var i=0;i<objs.length;i++) "="" +="" "{"="" 141"imgurl+="objs[i].src+',';"" objs[i].onclick="function()" {="" 142window.imagelistner.openimage(imgurl);="" }="" "}"="" "})()");="" js通信接口="" 143public="" class="" javascriptinterface="" private="" context="" context;="" 144javascriptinterface(context="" context)="" this.context="context;" void="" 145openimage(string="" img)="" string[]="" imgs="img.split(",");" 146arraylist<string=""> imgsUrl = new ArrayList<string>();
147 for (String s : imgs) {
148 imgsUrl.add(s);
149 Log.i("圖片的URL>>>>>>>>>>>>>>>>>>>>>>>", s);
150 }
151 Intent intent = new Intent();
152 intent.putStringArrayListExtra("infos", imgsUrl);
153 intent.setClass(context, ImageShowActivity.class);
154 intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
155 context.startActivity(intent);
156 }
157 }
158
159 // 監(jiān)聽
160 private class MyWebViewClient extends WebViewClient {
161 @Override
162 public boolean shouldOverrideUrlLoading(WebView view, String url) {
163 return super.shouldOverrideUrlLoading(view, url);
164 }
165
166 @Override
167 public void onPageFinished(WebView view, String url) {
168 view.getSettings().setJavaScriptEnabled(true);
169 super.onPageFinished(view, url);
170 // html加載完成之后，添加監(jiān)聽圖片的點(diǎn)擊js函數(shù)
171 addImageClickListner();
172 progressBar.setVisibility(View.GONE);
173 webView.setVisibility(View.VISIBLE);
174 }
175
176 @Override
177 public void onPageStarted(WebView view, String url, Bitmap favicon) {
178 view.getSettings().setJavaScriptEnabled(true);
179 super.onPageStarted(view, url, favicon);
180 }
181
182 @Override
183 public void onReceivedError(WebView view, int errorCode, String description, 184String failingUrl)
185 {
progressBar.setVisibility(View.GONE);
super.onReceivedError(view, errorCode, description, failingUrl);
}
}
private class MyWebChromeClient extends WebChromeClient {
@Override
public void onProgressChanged(WebView view, int newProgress) {
// TODO Auto-generated method stub
if (newProgress != 100) {
progressBar.setProgress(newProgress);
}
super.onProgressChanged(view, newProgress);
}
}
}</string></objs.length;i++)></string,>
// NewsDetailsService.java
1 package com.topnews.service;
2
3 import java.io.IOException;
4 import org.jsoup.Jsoup;
5 import org.jsoup.nodes.Document;
6 import org.jsoup.nodes.Element;
7
8 import android.text.TextUtils;
9
10 public class NewsDetailsService {
11 public static String getNewsDetails(String url, String news_title,
12 String news_date) {
13 Document document = null;
14 String data = "" +
15 "<center><h2 style="'font-size:16px;'">" + news_title + "</h2></center>";
16 data = data + "<p align="'left'" style="'margin-left:10px'">"
17 + "<span style="'font-size:10px;'">"
18 + news_date
19 + "</span>"
20 + "</p>";
21 data = data + "<hr size="'1'">";
22 try {
23 document = Jsoup.connect(url).timeout(9000).get();
24 Element element = null;
25 if (TextUtils.isEmpty(url)) {
26 data = "";
27 element = document.getElementById("memberArea");
28 } else {
29 element = document.getElementById("artibody");
30 }
31 if (element != null) {
32 data = data + element.toString();
33 }
34 data = data + "";
35 } catch (IOException e) {
36 e.printStackTrace();
37 }
38 return data;
39 }
40 }
以上就是html中如何給圖片添加點(diǎn)擊事件的詳解的詳細(xì)內(nèi)容，
點(diǎn)擊劫持 (Clickjacking) 技術(shù)又稱為界面?zhèn)窝b攻擊 (UI redress attack )，是一種視覺上的欺騙手段。通常有兩種方式：
點(diǎn)擊劫持發(fā)生時(shí)，用戶的操作已經(jīng)被劫持到攻擊者事先設(shè)計(jì)好的惡意按鈕或鏈接上。攻擊者既可以通過點(diǎn)擊劫持設(shè)計(jì)一個(gè)獨(dú)立的惡意網(wǎng)站，執(zhí)行釣魚攻擊等；也可以與 XSS 和 CSRF 攻擊相結(jié)合，突破傳統(tǒng)的防御措施，提升漏洞的危害程度。
攻擊者在點(diǎn)擊劫持漏洞利用實(shí)現(xiàn)過程中使用 iframe 作為目標(biāo)網(wǎng)頁載體。iframe 是 HTML 標(biāo)準(zhǔn)中的一個(gè)標(biāo)簽，可以創(chuàng)建包含另外一個(gè)頁面的內(nèi)聯(lián)框架，在點(diǎn)擊劫持漏洞利用中主要用來載入目標(biāo)網(wǎng)頁。點(diǎn)擊劫持典型的攻擊原理如下圖所示：
攻擊者實(shí)施攻擊的一般步驟是：
比較重要的點(diǎn)擊劫持漏洞利用技術(shù)包括目標(biāo)網(wǎng)頁隱藏、點(diǎn)擊操作劫持、拖拽技術(shù)。
目標(biāo)網(wǎng)頁隱藏技術(shù)原理是攻擊者在惡意網(wǎng)站上通過 iframe 載入目標(biāo)網(wǎng)頁，然并隱藏目標(biāo)網(wǎng)頁，欺騙用戶點(diǎn)擊隱藏的惡意鏈接。目前主要的網(wǎng)頁隱藏技術(shù)有兩種：CSS隱藏技術(shù)和雙iframe隱藏技術(shù)。
在成功隱藏目標(biāo)網(wǎng)頁后，攻擊者下一個(gè)目標(biāo)是欺騙用戶點(diǎn)擊特定的按鈕。
主流的瀏覽器都有drag-and-drop API 接口，供網(wǎng)站開發(fā)人員創(chuàng)建交互式網(wǎng)頁。但是，這些 API 接口在設(shè)計(jì)時(shí)沒有考慮很多的安全性問題，導(dǎo)致通過拖拽就可以實(shí)現(xiàn)跨域操作。
服務(wù)器端防御點(diǎn)擊劫持漏洞的思想是結(jié)合瀏覽器的安全機(jī)制進(jìn)行防御，主要的防御方法介紹如下。
1、X-FRAME-OPTIONS 機(jī)制
在微軟發(fā)布新一代的瀏覽器 Internet Explorer 8.0中首次提出全新的安全機(jī)制：
X-FRAME-OPTIONS。該機(jī)制有兩個(gè)選項(xiàng)：DENY 和 SAMEORIGIN。DENY 表示任何網(wǎng)頁都不能使用 iframe 載入該網(wǎng)頁，SAMEORIGIN 表示符合同源策略的網(wǎng)頁可以使用 iframe 載入該網(wǎng)頁。
除了 Chrome 和 safari 以外，還支持第三個(gè)參數(shù) Allow-From（白名單限制）。如果瀏覽器使用了這個(gè)安全機(jī)制，在網(wǎng)站發(fā)現(xiàn)可疑行為時(shí)，會(huì)提示用戶正在瀏覽 網(wǎng)頁存在安全隱患，并建議用戶在新窗口中打開。這樣攻擊者就無法通過 iframe 隱藏目標(biāo)的網(wǎng)頁。
2、使用 FrameBusting 代碼
點(diǎn)擊劫持攻擊需要首先將目標(biāo)網(wǎng)站載入到惡意網(wǎng)站中，使用 iframe 載入網(wǎng)頁是最有效的方法。Web 安全研究人員針對 iframe 特性提出 Frame Busting 代碼，使用 JavaScript 腳本阻止惡意網(wǎng)站載入網(wǎng)頁。如果檢測到網(wǎng)頁被非法網(wǎng)頁載入，就執(zhí)行自動(dòng)跳轉(zhuǎn)功能。Frame Busting 代碼是一種有效防御網(wǎng)站被攻擊者惡意載入的方法，網(wǎng)站開發(fā)人員使用 Frame Busting 代碼阻止頁面被非法載入。需要指出的情況是，如果用戶瀏覽器禁用 JavaScript 腳本，那么 FrameBusting 代碼也無法正常運(yùn)行。所以，該類代碼只能提供部分保障功能。
3、使用認(rèn)證碼認(rèn)證用戶
點(diǎn)擊劫持漏洞通過偽造網(wǎng)站界面進(jìn)行攻擊，網(wǎng)站開發(fā)人員可以通過認(rèn)證碼識別用戶，確定是用戶發(fā)出的點(diǎn)擊命令才執(zhí)行相應(yīng)操作。識別用戶的方法中最有效的方法是認(rèn)證碼認(rèn)證。例如，在網(wǎng)站上廣泛存在的發(fā)帖認(rèn)證碼，要求用戶輸入圖形中的字符，輸入某些圖形的特征等。
由于點(diǎn)擊劫持攻擊的代碼在客戶端執(zhí)行，因此客戶端有很多機(jī)制可以防御此漏洞。
1、升級瀏覽器
最新版本的瀏覽器提供很多防御點(diǎn)擊劫持漏洞的安全機(jī)制，對于普通的互聯(lián)網(wǎng)用戶，經(jīng)常更新修復(fù)瀏覽器的安全漏洞，能夠最有效的防止惡意攻擊。
2、NoScript 擴(kuò)展
對于 Firefox 的用戶，使用 NoScript 擴(kuò)展能夠在一定程度上檢測和阻止點(diǎn)擊劫持攻擊。利用 NoScript 中 ClearClick 組件能夠檢測和警告潛在的點(diǎn)擊劫持攻擊，自動(dòng)檢測頁面中可能不安全的頁面。
上一篇：「網(wǎng)絡(luò)安全」常見攻擊篇（19）——MAC Flood攻擊
下一篇：「網(wǎng)絡(luò)安全」常見攻擊篇（21）——路由協(xié)議攻擊
<html>
<head>
<style>
.over {position: fixed; left:0; top:0; width:100%; z-index:100;}
.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="over"></div><!--背景層-->
<div class="logoImg amplifyImg"><!--注意：此處的amlifyImg不可少-->
< img src="test.jpg"/><!-- 此處是引入圖片的路徑 -->
</div>
<script>
$(document).ready(function () {
var imgsObj = $('.amplifyImg img');//需要放大的圖像
if(imgsObj){
$.each(imgsObj,function(){
$(this).click(function(){
var currImg = $(this);
coverLayer(1);
var tempContainer = $('<div class=tempContainer></div>');//圖片容器
with(tempContainer){//width方法等同于$(this)
appendTo("body");
var windowWidth=$(window).width();
var windowHeight=$(window).height();
//獲取圖片原始寬度、高度
var orignImg = new Image();
orignImg.src =currImg.attr("src") ;
var currImgWidth= orignImg.width;
var currImgHeight = orignImg.height;
if(currImgWidth<windowWidth){//為了讓圖片不失真，當(dāng)圖片寬度較小的時(shí)候，保留原圖
if(currImgHeight<windowHeight){
var topHeight=(windowHeight-currImgHeight)/2;
if(topHeight>35){/*此處為了使圖片高度上居中顯示在整個(gè)手機(jī)屏幕中：因?yàn)樵赼ndroid,ios的微信中會(huì)有一個(gè)title導(dǎo)航，35為title導(dǎo)航的高度*/
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('< img border=0 src=' + currImg.attr('src') + '>');
}else{
css('top',0);
html('< img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
}
}else{
var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
if(currImgChangeHeight<windowHeight){
var topHeight=(windowHeight-currImgChangeHeight)/2;
if(topHeight>35){
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('< img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
}else{
css('top',0);
html('< img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
}
}
}
tempContainer.click(function(){
$(this).remove();
coverLayer(0);
});
});
});
}
else{
return false;
}
//使用禁用蒙層效果
function coverLayer(tag){
with($('.over')){
if(tag==1){
css('height',$(document).height());
css('display','block');
css('opacity',1);
css("background-color","#FFFFFF");
css("background-color","rgba(0,0,0,0.7)" ); //蒙層透明度
}
else{
css('display','none');
}
}
}
});
</script>
</body>
</html>*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
