ورود

View Full Version : فراخوانی فایل js داخل HTML


امیر اردلان
سه شنبه 26 شهریور 1387, 15:56 عصر
سلام به همه اساتید ،

به یک مشکل برخورد کردم . یک فایل جاوااسکریپت دارم که میخوام داخل یک HTML فراخونیش کنم . دستور <script type="text/javascript" src="myfile.js"> </script> رو داخل HTML مینویسم اما وقتی که صفحه رو باز می کنم جاوا اسکریپت لود نمیشه ، در حالیکه وقتی کد فایل جاوا اسکریپت رو مستقیما داخل HTML می نویسم به خوبی کاری می کنه .
به نظر شما مسکل چیه؟
ممنون میشم راهنمایی کنید .
kashaneh
سه شنبه 26 شهریور 1387, 18:03 عصر
مشکل شما شاید به خاطر این دو دلیل باشه

1 - مسیر فایل اسکریپت شما درست نیست. در حالتی که شما ذکر کردی فایل اسکریپتتون باید در کنار فایل html قرار گرفته باشه

2 - اصلا فایل اسکریپت شما جاوااسکریپت نباشه!!! :متفکر: یعنی ممکنه از نوع VbScript باشه با پسوند vb. پس حتما چک کنین ببینید دستورات جاوااسکریپت هستن یا وی بی اسکریپت.

می تونید فایل اسکریپت رو اینجا بزارین تا بهتر متوجه مشکل بشیم.
امیر اردلان
سه شنبه 26 شهریور 1387, 18:25 عصر
ممنونم از توجهتون .


محتویات فایل myfile.js به صورت زیره :


<script>
info="<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>

<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu-collapsed.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple JQuery Collapsing menu</title>
<!--[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]-->
</head>
<body>
<ul id="menu4" class="menu collapsible">
<li>
<a href="http://mysite.com/search.html">search the site</a></li>
<li>
<li>
<a href="http://mysite.com/index.html">HOME</a></li>
<li>
<a href="#">EXPRESS</a>
<ul>
<li><a href="http://mysite.com/categories/index7.html">Item7</a></li>
<li><a href="http://mysite.com/categories/index14.html">Item14</a></li>
</ul>
</li><li>
<a href="#">B&C</a>
<ul>
<li><a href="http://mysite.com/categories/BC.html">ALL ITEMS</a></li>
<li><a href="#">PNTS</a></li>
<li><a href="#">N&R</a></li>
<li><a href="http://mysite.com/categories/bsb.html">BSB</a></li>
<li><a href="http://mysite.com/bsbo.html">BSBO</a></li>
<li><a href="http://mysite.com/categories/bsp.html">BSP</a></li>
</ul>
</li>
<li>

</ul>
</body>
</html>


</script>
من تازه کارم ، نمی دونم آیا این فایل واقعا جاوااسکریپت هست یا نه ، لطفا بررسی کنید و بگید که این چیه.
راستی فایل js هم در مسیر فایل HTML قرار داره .
Edward
سه شنبه 26 شهریور 1387, 20:22 عصر
شما فایل HTML و جاوااسکریپتتون رو در یک دیرکتوری گذاشتید؟
امیر اردلان
سه شنبه 26 شهریور 1387, 20:51 عصر
شما فایل HTML و جاوااسکریپتتون رو در یک دیرکتوری گذاشتید؟
بله ... هر دو در یک پوشه هستند .
لطفا بگید این کد بالا اصلا جاوا اسکریپت هست یا خیر!!!
jaza_sa
سه شنبه 26 شهریور 1387, 20:59 عصر
اون چیزی که من از کد شما متوجه شدم اینه که
یک تک script باز کردید ، و یک متغیر با نام info درنظر گرفتید
و مقدادیری رو در اون ذخیره کردید که گویا تگ های html هست. ولی متوجه بقیش نشدم ...
امیر اردلان
سه شنبه 26 شهریور 1387, 21:18 عصر
اصل قضیه اینه که من یک منو دارم و میخوام این منو در همه صفحات سایت به نمایش در بیاد ، به طوری که لازم نباشه کد منو رو در همه صفحات قرار بدم . یعنی یک فایل باشه که همه صفحات اون رو فراخونی کنند و هر زمان که لازم بود منو ادیت بشه ، فقط با ادیت کردن همون یک فایل ، این کار انجام بشه ، نه اینکه لازم باشه کد منو رو در تک تک صفحات ادیت کنم .
برای روشن شدن بیشتر موضوع لطفا فایل منو رو از اینجا http://www.i-marco.nl/weblog/jquery-accordion-menu/demo.zip دانلود کنید .
اگه لطف کنید و بگید که باید چی کار کنم ممنون میشم .
Ali100
سه شنبه 26 شهریور 1387, 21:28 عصر
این صفحه HTML هست اول script tag ها رو از اول و آخر کد بردارید


<script></script>بعد =info رو بردارید چون لازم نیست حالا HTML اجرا می شه . این کد باید به اسم HTML
ذخیره بشه مثلا Test.html حالا این فایلو می تونی اجرا کنی
=========================================
کد های Javascript اینها هستن



<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu-collapsed.js" type="text/javascript"></script>
فایل اول jquery-1.2.1.min.js که کاملا معلومه یکی از Effect یا Plugins های Jquery هست
دومی هم menu-collapsed.js هست اگر این 2 تا فایل JS رو داری باید کنار HTML کپی
کنی تا اجرا بشن .

Test.html رو اجرا کنی اسکریپتها خودشون اجرا می شن

ولی اگر 2 تا فایل JS رو نداری میتونی Test.html رو اجرا کنی فقط Code Javascript ها
اجرا نمی شه . چون نیست که بخواد اجرا بشه .
jaza_sa
سه شنبه 26 شهریور 1387, 21:31 عصر
اگر از ASP.Net استفاده میکنید میتونید از Master Page استفاده کنید و بهتره سوالتون رو در اون بخش بپرسید
امیر اردلان
سه شنبه 26 شهریور 1387, 22:02 عصر
این صفحه HTML هست اول script tag ها رو از اول و آخر کد بردارید


<script></script>بعد =info رو بردارید چون لازم نیست حالا HTML اجرا می شه . این کد باید به اسم HTML
ذخیره بشه مثلا Test.html حالا این فایلو می تونی اجرا کنی
=========================================
کد های Javascript اینها هستن



<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu-collapsed.js" type="text/javascript"></script>
فایل اول jquery-1.2.1.min.js که کاملا معلومه یکی از Effect یا Plugins های Jquery هست
دومی هم menu-collapsed.js هست اگر این 2 تا فایل JS رو داری باید کنار HTML کپی
کنی تا اجرا بشن .

Test.html رو اجرا کنی اسکریپتها خودشون اجرا می شن

ولی اگر 2 تا فایل JS رو نداری میتونی Test.html رو اجرا کنی فقط Code Javascript ها
اجرا نمی شه . چون نیست که بخواد اجرا بشه .

ممنون از راهنمایی شما .
دقیقا سوال من اینه که چطور می تونم همین Test.html رو تو همه صفحات داشته باشم بدون اینکه کدش رو در همه صفحات کپی کنم . لطفا دقت کنید که Test.html یک منو هست
Ali100
چهارشنبه 27 شهریور 1387, 01:55 صبح
نمی دونم منظورتو درست گرفتم یا نه . ولی کاری که گفتی با روشهای مختلفی می شه انجام داد هم با JS هم مثلا frame و iframe یعنی صفحه در صفحه .

یک مثال ساده : من با frame همون Menu خودتو که گذاشتم کنار گوگل ( البته فقط واسه
آزمایش و بدون هیچ Style و Script و یا تنظیم صفحه ) لینک عکسو اینجا گذاشتم می تونی ببینی

http://i36.tinypic.com/f2lk7s.jpg

اگر به کارت می یاد واسه تست می تونی این کارو بکنی ( رو کامپیوتر خودت تست کن )

کد زیرو در یک فایل HTML مثلا frame.html ذخیره کن و کنار بقیه فایلهایی که دانلود کردی
قرار بده




<html><head></head>

<frameset cols="25%,*">
<frame src="index.html" name="menu" scrolling=no frameborder=no>
<frame src="http://www.google.com" name="main" frameborder=no>
</frameset>

</html>


حالا اگر همه چیز درست باشه اگر فایل frame.html رو اجرا کنی Menu باید کنار سایت
گوگل قرار بگیره . ( باز هم می گم این فقط آزمایشه بدون استفاده از style اضافی )


حالا اگر رو لینکهای داخل Menu کلیک کنی مثلا Yahoo.com می بینی داخل همون
Frame که Menu هست وارد سایت Yahoo میشه در نتیجه Menu رو دیگه نمی تونی ببینی
واسه حل این مشکل باید لینکهای Menu که در Index.html هستن تغییر بدی ( a تگ ) تا وقتی
رو لینکهای Menu کلیک میکنی صفحه Google تغییر کنه و به سایت یا صفحه بعدی بره و Menu
ثابت بمونه .......
امیر اردلان
چهارشنبه 27 شهریور 1387, 08:21 صبح
علی جان ممنونم از راهنماییت .
اینی که گفتی امتحان کردم . اشکالش اینه که خود صفحه اصلی (مثلا سایت گوگل) رو شیفت میده به سمت راست . نمیشه یه کاری کرد که منو روی صفحه اصلی بیاد ، نه کنارش؟؟؟
راستی غیر از این روش دیگه چه روشهایی هست؟
moosa2007
چهارشنبه 27 شهریور 1387, 10:46 صبح
frame , iframe رو میتوانی در هر 4 جناه استفاده کنی
بالا ، پایین ، چپ و راست
امیر اردلان
چهارشنبه 27 شهریور 1387, 11:12 صبح
frame , iframe رو میتوانی در هر 4 جناه استفاده کنی
بالا ، پایین ، چپ و راست


منظور من این بود که منو به صورت یک لایه روی صفحه نمایش داده بشه . منظورم بالای صفحه (top) نیست.
jaza_sa
چهارشنبه 27 شهریور 1387, 12:33 عصر
frame ها در xhmlt 1.1 پشتیبانی نمیشن ، به عبارت منسوخ شدن
بهتره از روش دیگه ای استفاده کنید
امیر اردلان
چهارشنبه 27 شهریور 1387, 16:56 عصر
ممنونم از همه دوستان به خاطر پیگیری و توجهی که کردن . من کدی که در صفحه اول این تاپیک گداشته بودم رو به طور کامل تبدیل به جاوااسکریپت کردم و فایل جاوااسکریپت رو فراخونی کردم و مشکل حل شد . اون کد که اونجا می بینید جاوااسکریپت نیست و اچ تی ام ال هستش . من از اول اشتباه کرده بودم.
Ali100
پنج شنبه 28 شهریور 1387, 22:08 عصر
چون پرسده شد و یرای اینکه بی جواب نمونه می گم
در مورد frame اگر بخوایم وقتی رو Menu کلیک می کنی در Frame دوم نشون
داده بشه چی کار باید بکنیم ؟ اگر دقت کنی هر Frame یک اسم یا Name داره
حالا تنها کار اینه که برای لینکها یک Target با اسم هر کدوم از Frame ها اضافه کنی.

الان اسم اون frame که صفحه اصلی رو نشون میده Main هست پس من
یک Target با همین اسم به لینکها اضافه میکنم من در مورد لینک Yahoo مثال می زنم



<li><a href="http://search.yahoo.com/">Yahoo!</a></li>

در این خط

<a href="http://search.yahoo.com/">Yahoo!</a>

به این شکل در می یاد

<a href="http://search.yahoo.com/" target="main">Yahoo!</a>
با همین کار صفحه در هر کدوم از Frame ها که بخوای نشون داده میشه . اگر Target برابر
با top_ باشه هر 2 Frame تغییر می کنه
================================================== ====
حالا چند سئوال : آیا استفاده از Frame برای این کار مناسب ترین روش ممکنه ؟

این یک مثال ساده بود برای این که نشون بدیم چطوری میشه با HTML بدون
Javascript یک صفحه در صفحه درست کنیم ضمنا در کنار Frame نباید iframe هم
فراموش کنیم

ولی از Frame بیشتر برای نشون دادن تبلیغات کنار صفحه ( که در بعضی Blog ها
حتما دیدین ) یا Google Ads و ... استفاده می شه .
Browser های جدید مثل Firefox 3.x به راحتی Frame ها رو تشخیص می دن فقط کافییه
در یک صفحه که Frame داره Right Click کنید تا امکانات مربوط به Frame رو ببینید
ضمنا در حالت معمولی اگر با Mouse لبه Frame ها رو بگیرین به راحتی می تونین اندازه Frame رو تغییر بدین ( این در مورد Frame هست نه iframe ) .

آیا با Javascript می تونیم Frame , iframe درست کنیم ؟ بله مثل آب خوردن مثلا با استفاده
از iframe در javascript می تونیم یک عکس یا یک صفحه رو به صفحه اصلی وارد کنیم
.... فعلا بسه دیگه ... بریدم
================================================== =====
================================================== =====
کاملا درسته این فایل HTML هست و شما اول و آخر کد HTML از تگ <script> استفاده کردین
تا به Javascript تبدیل بشه .
ولی حالا مثل اینکه مشکل حل شده و کدها رو بشکل درست به Javascript تبدیل کردین
منم کدهای HTML رو بشکلی خیلی ساده بردم به Javascript اگر دوست داشتین می تونین
امتحان کنین .
در demo.zip دوتا فایل HTML هست اولی index.html که Menu رو بشکل باز نشون می ده
و دومی index_collapsed.html که Menu رو بشکل بسته نشون می ده من از دومی استفاده
کردم . روشی که من استفاده کردم خیلی راحته یعنی کدهای HTML رو بردم به فایل JS و با
document.write اجرا کردم برای همین شما خیلی راحت می تونین لینکها؛نوشته ها و مونوها
رو هر جور دوست دارین تغییر بدین .

الان فقط یک فایل Test.js اضافه شده همین . برای اجرای Menu در هر صفحه ای که می خواین
فقط باید خط زیرو در HTML بین head Tag پایینتر از 2 فایل js اصلی قرار بدین


<script src="Test.js" type="text/javascript"></script>به این شکل در میاد



<head>
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu-collapsed.js" type="text/javascript"></script>
<script src="Test.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
....
</head>
حالا با کد زیر می تونین Menu رو اجرا کنین این کد رو حتما بین body تگ قرار بدین به این شکل


<body>
<script>MenuTest();</script>
</body>
همون طور که گفتم کدهای Menu از HTML به فایل Test.js منتقل شده پس برای تغییر نوشته ها آدرسها و کلا ادیت Menu باید فایل Test.js رو باز کنید و هر تغییری که می خواین بدین .

برای آزمایش کدهایی که گفتم روی Rapidshare و در یک فایل rar گذاشتم که اگر کسی
خواست می تونه از لینک زیر دانلود کنه . سایز فایل فقط 14KB هست .

http://rapidshare.com/files/146330972/Test.rar

در Test.rar جز فایلهای js و css دوتا فایل HTML هست که در هر دو Menu با استفاده از
Javascript اجرا می شه با این فرق که در Test.html فقط Menu بدون نوشته های اضافی
اجرا می شه مثل عکس زیر

http://i35.tinypic.com/2vagkkn.jpg

و Test_index_collapsed.html با نوشته مثل عکس پایین

http://i35.tinypic.com/2z6cgfq.jpg

================================================== =====

من دقیقا همون کاری رو کردم که شما می خواستین انجام بدین یعنی HTML رو بردم در js
و کدها از اونجا اجرا می شه . این نمونه ای از کد داخل Test.js هست البته خلاصه شده ::



function MenuTest(Data) {

var Data = new Array();
var Data = ([
'<ul id=\"menu\">'+
'<li>'+
'<a href=\"#\">Weblog Tools</a>'+
'<ul>'+
'<li><a href=\"http://www.pivotx.net/\">PivotX</a></li>'+
'<li><a href=\"http://www.wordpress.org/\">WordPress</a></li>'+

....

'<li><a href=\"http://www.ask.com/\">Ask.com</a></li>'+
'<li><a href=\"http://www.live.com/?searchonly=true\">Live Search</a></li>'+
'</ul>'+
'</li>'+
'</ul>'
])
document.write(Data);
}
================================================== =====
در اینجا کد HTML به js منتقل شده و با document.write اجرا می شه همین . آیا روش دیگه ای هم هست ؟ بله حتما هست . مثلا بجای استفاده از document.write می تونیم از inner.HTML استفاده کنیم که فقط چند خط کد باید تغییر کنه و...
یا مثلا کلا Menu رو با دستورات JS درست کنیم ... یا ...
================================================== =====
بهر حال این کد فقط جنبه آزمایش داره و من فقط اونو رو Firefox 3.x و IE8b2 و Google Chrome امتحان کردم
================================================== =====
خوش باشین