10/10/2018, 11:09
Pass parameters vảo trong HTM
Có bạn nào rành code làm ơn viết cho một Popuppicture.HTM thật ngắn gọn.
Ví dụ như khi tôi gọi link <a href="Popuppicture.html?mypath=pictures/Hoahong.jpg"> thì cái Popuppicture.htm này pop lên một trang có cái hình Hoahong.jpg.
Mình tìm trong internet thì thấy chỉ có Java hay PHP mới làm được mà mình thì không rành Java, PHP nên bí!!!!!
Cám ơn các bạn rất nhiều!!!!!!
Ví dụ như khi tôi gọi link <a href="Popuppicture.html?mypath=pictures/Hoahong.jpg"> thì cái Popuppicture.htm này pop lên một trang có cái hình Hoahong.jpg.
Mình tìm trong internet thì thấy chỉ có Java hay PHP mới làm được mà mình thì không rành Java, PHP nên bí!!!!!
Cám ơn các bạn rất nhiều!!!!!!
Bài liên quan
Bác có thể pass parameter thông qua URL bằng hash key (#) mà không ảnh hưởng đến việc reload trang. Cái này thường được sử dụng làm page anchor và trong các thao tác chuyển đổi dữ liệu bằng AJAX. Như vậy:
<a href="Popuppicture.html#Hoahong.jpg">
Sau đó trong file HTML, bác TOM sử dụng Javascript để lấy dữ liệu URL (window.location) và split nó ra với mốc là dấu hash key. Từ đó lấy cái hình là được
Pseudo-code, tại con không nhớ chính xác lắm cú pháp vài chỗ:
function getPicture() { url = window.location array = split url with '#' // sẽ trả về 2 elements picture_path = array[1] // element thứ 2 return "picture" + picture_path } <img src="<script>getPicture();</script>" />Cái funtion Java đó để ở đâu trong HTM?
<html> <head> <script> function getPicture() { // code lines } </script> </head> <body> <img src="<script>getPicture();</script>" /> </body> </html>1. click vào link thì pop lên cái hình, hay
2. click vào link thì dẫn tới trang có cái hình, và đồng thời pop lên cái hình.
Trường hợp 1, bác thử cái này:
Automatically Size Popup Window to Image Using Javascript
Tác giả trình bày chữ trắng trên nền đen trông muốn lòi con mắt. Nhưng cách thực hiện tương đối chạy tốt. Để ý trong bài này, tác giả chỉ dùng cái tag <script> trơn không có thuộc tính (attributes), không hẳn đúng với tiêu chuẩn. Đúng tiêu chuẩn viết là <script type="text/javascript">
Copy phần code từ <script> đến </script>
Paste vào trang html có link. Bên trong cái tag <head>, ngay trước cái khóa tag </head> là tốt nhất.
Theo thí dụ 1, 2 hoặc 3.
Trường hợp 2 thì rắc rối hơn nhiều. Cái target page phải có cách để biết là nó vừa được referred tới từ một đòi hỏi popup image. Theo giải pháp của amida đưa ra thì nó phải parse cái url để hiểu.
[=========> Bổ sung bài viết <=========]
>>>>>> bổ túc thêm <<<<<<<<
Xin lỗi, cái này tôi chưa làm bao giờ nên phải đem đi thử rồi mới đăng tiếp cho bác.
Trường hợp 2: bác muốn qua trang mới (Popuppicture.htm) và đồng thời pop lên cái hình (trong một window nhỏ)
Yêu cầu:
(i) File page1.html có một link với queystring trỏ vào đường dẫn (file path) của ảnh
(ii) khi click vào link này, sẻ chuyển qua page2.htm
(iii) khi page2.htm được load, trình duyệt (browser) sẽ chạy khoảng script trong head của nó.
(iv) trong đoạn script này, có một phần parse cái url, lấy ra querystring . Và nếu trong đám query đó có một cái tên là 'imagetodisplay' thì trình duyệt sẽ coi như trị của query này là đường dẫn đến ảnh. Và nó sẽ pop lên một window vừa đúng cỡ (size) của ảnh.
Thực hành:
Bác đặt cái link như sau:
<a href="Popuppicture.html?imagetodisplay=./pictures/Hoahong.jpg">Go to new page and popup picture</a>
(You might have to adjust the relative path of the image)
Và nhét cái code này vào cái tag <head> của file Popuppicture.htm
<script type="text/javascript">
<!--
// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.
// SETUPS:
// ===============================
// Set the horizontal and vertical position for the popup
PositionX = 100;
PositionY = 100;
// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)
defaultWidth = 500;
defaultHeight = 500;
// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows
var AutoClose = true;
// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(300,300);');
writeln('width=300-(document.body.clientWidth-document.images***91;0***93;.width);');
writeln('height=300-(document.body.clientHeight-document.images***91;0***93;.height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images***91;"George"***93;.width;');writeln('window.innerHeight=document.images***91;"George"***93;.height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();
}}
// auto popup if the url contains a querystring
if (queryString('imagetodisplay') != 'false') {
popImage(queryString('imagetodisplay'), 'Image in Normal Size');
// (change the title to suit your need)
}
function PageQuery(q) {
if (q.length > 1) this.q = q.substring(1, q.length);
else this.q = null;
this.keyValuePairs = new Array();
if (q) {
for (var i = 0; i < this.q.split("&").length; i++) {
this.keyValuePairs***91;i***93; = this.q.split("&")***91;i***93;;
}
}
this.getKeyValuePairs = function() { return this.keyValuePairs; }
this.getValue = function(s) {
for (var j = 0; j < this.keyValuePairs.length; j++) {
if (this.keyValuePairs***91;j***93;.split("=")***91;0***93; == s)
return this.keyValuePairs***91;j***93;.split("=")***91;1***93;;
}
return false;
}
this.getParameters = function() {
var a = new Array(this.getLength());
for (var j = 0; j < this.keyValuePairs.length; j++) {
a***91;j***93; = this.keyValuePairs***91;j***93;.split("=")***91;0***93;;
}
return a;
}
this.getLength = function() { return this.keyValuePairs.length; }
}
function queryString(key) {
var page = new PageQuery(window.location.search);
return unescape(page.getValue(key));
}
// -->
</script>
Nếu bị trục trặc sẻ hỏi tiếp
- Trang xem.html chứa các liên kết xem hình
- Trang hinh.html hiển thị hình cần xem
- Thư mục hinh chứa các hình
Cả 3 ngang cấp!!!
File: xem.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xem hình</title>
</head>
<body>
<a href="hinh.html?h=01.jpg" target="_self">Hình 01</a><br />
<a href="hinh.html?h=02.jpg" target="_self">Hình 02</a><br />
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hình</title>
<script language="javascript" type="text/javascript">
var thu_muc_hinh = 'hinh/';
function lay_ten_hinh(){
var s = location.search;
var p = s.indexOf('=');
var r='';
if(p>-1){
s = s.substring(p+1,s.length);
r = thu_muc_hinh + s;
}
return r;
}
var hinh = lay_ten_hinh();
if(hinh!=''){
var nap_hinh = new Image();
nap_hinh.src = hinh;
}
</script>
</head>
<body>
<img src="" onerror="this.style.display:'none'" id="hinh" />
<script type="text/javascript">
if(hinh!=''){
document.getElementById('hinh').src=hinh;
}
</script>
</body>
</html>
Chạy trang xem.html trước
Cám ơn Amida, Mèo Gào và Bạch Nga một lần nửa.
Thêm một thắc mắc:
Nếu hình không ở folder hình mà ở một folder parent của cái file htm thì code ra sao?
Hình mình đã có sẳn ở trong nhiều folder khác nhau ở ngoài (parent) cái folder mà mình định bỏ cái HTM trong đó.
I love ddth.com
Bác TOM xem qua relative URL nhé, nó sẽ giải quyết vấn đề đó. Chỉ cần mình sửa lại đường dẫn đến hình là xong thôi.
Ví dụ:
File hình ở đây: parent/pictures/picture1.jpg
File HTML ở đây: parent/view/view.html
Thì trong file view.html, bác sẽ để đường dẫn đến hình là "../picture/picture1.jpg". Dấu 2 chấm sẽ đưa URL về parent directory. Tùy bác muốn đưa về folder mà set cho hợp thôi, bác tham khảo ở link bên trên là sẽ rõ.
Trong code của bachnga
<img src="" onerror="this.style.display:'none'" id="hinh" />
<script type="text/javascript">
if(hinh!=''){
document.getElementById('hinh').src = '../pictures/' + hinh;
}
</script>
</body>