JavaScriptのJSウィンドウを詳しく解説＜2＞-jsチュートリアル-php.cn

JavaScriptのJSウィンドウを詳しく解説＜2＞

黄舟

リリース： 2017-02-27 14:47:55

オリジナル

1585 人が閲覧しました

質問? JavaScript における JS ウィンドウの詳細な説明<2>

定義: JavaScript ウィンドウ - ブラウザオブジェクトモデル
ブラウザオブジェクトモデル (BOM)
ブラウザオブジェクトモデル (ブラウザオブジェクトモデル) には正式な標準はありません。
最近のブラウザでは JavaScript の対話性のために (ほぼ) 同じメソッドとプロパティが実装されているため、メソッドとプロパティは BOM とみなされます。

1.Window オブジェクト
すべてのブラウザが window オブジェクトをサポートしています。ブラウザウィンドウを表します。
すべての JavaScript グローバルオブジェクト、関数、変数は自動的に window オブジェクトのメンバーになります。
グローバル変数はウィンドウオブジェクトのプロパティです。
グローバル関数はウィンドウオブジェクトのメソッドです。
HTML DOM のドキュメントもウィンドウオブジェクトのプロパティの 1 つです:

window.document.getElementById("header");

ログイン後にコピー

これと同じ:

document.getElementById("header");

ログイン後にコピー

2.ウィンドウサイズ
ブラウザのサイズを決定するには 3 つの方法がありますウィンドウ (ツールバーとスクロールバーを除く、ブラウザのビューポート)。

Internet Explorer、Chrome、Firefox、Opera、Safari の場合:

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

ログイン後にコピー

Internet Explorer 8、7、6、5 の場合:

document.documentElement.clientHeight
document.documentElement.clientWidth

ログイン後にコピー

または

これはボディの長さと幅を取得するためのものです

document.body.clientHeight
document.body.clientWidth

ログイン後にコピー

例えば:

	var w = window.innerWidth;
	var h = window.innerHeight;
	/*这个获取的长宽与下列的相同*/
	var w2 = document.documentElement.clientWidth;
	var h2 = document.documentElement.clientHeight;
	/*这得到的是body的长度*/
	var h1 = document.body.clientHeight;
	var w1 = document.body.clientWidth;
	document.getElementById("a1").innerHTML="内部窗口大小为："+w+"*"+h+"   "+w1+"*"+h1+"  "+w2+"*"+h2;

ログイン後にコピー

3.メソッド

その他のメソッド:
window.open( ) - 新しいウィンドウを開きます

の例:

window.open(&#39;1.html&#39;,&#39;ss&#39;);
window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸

ログイン後にコピー

の例:

window.resizeTo(600,600);

ログイン後にコピー

4.localtion

window.location オブジェクトは、現在のページのアドレス (URL) を入力し、ブラウザーが新しいページにリダイレクトします。

Window Location
window.location オブジェクトは、window プレフィックスを使用せずに記述することができます。
いくつかの例:

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

ログイン後にコピー

document.getElementById("a2").innerHTML="主机名"+location.hostname+" 
 路径:"+location.pathname+" 端口号:"+location.port+"  web协议:"+location.protocol;

ログイン後にコピー

5.Window Location Assign

location.assign() メソッドは、新しいドキュメントを読み込みます。

例:

document.getElementById("a2").innerHTML="主机名"+location.hostname+"  
路径:"+location.pathname+" 端口号:"+location.port+"  web协议:"+location.protocol+" IRL:"+location.href;

ログイン後にコピー

6.ウィンドウ履歴

window.historyオブジェクトは、ウィンドウプレフィックスを使用せずに記述することができます。

ユーザーのプライバシーを保護するために、JavaScript によるこのオブジェクトへのアクセス方法には制限が設けられています。いくつかのメソッド: history.back() - ブラウザの「戻る」ボタンをクリックするのと同じ

history.forward() - ブラウザの「進む」ボタンをクリックするのと同じ

7.window.navigatorオブジェクトには、訪問者のブラウザに関する情報が含まれています。

Window Navigator

window.navigator オブジェクトは、window プレフィックスを使用せずに記述することができます。例

window.location.assign("http://www.w3school.com.cn");
window.location.assign("1.html");

ログイン後にコピー

警告: ナビゲーターオブジェクトからの情報は誤解を招くため、ブラウザのバージョンの検出には使用しないでください。理由は次のとおりです: ナビゲーターデータはブラウザユーザーによって変更される可能性があります

ブラウザは新しいオペレーティングシステムがリリースされたことを報告できませんブラウザで

8. メッセージボックス:

アラートボックス: balert("Hello again! Here we show you" + 'n' + " アラートに改行を追加する方法ボックス」)

。

确认框: var r=confirm("Press a button!") 这里的r值，点击确认为true，否则为false

提示框： var name=prompt("请输入您的名字","Bill Gates")前者是提示信息，后者是默认值，name是输入框的返回值

二、JavaScript 计时

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()

语法：var t=setTimeout("javascript语句",毫秒)

setTimeout("alert(&#39;5seconds message!&#39;)",5000);//5秒后执行

ログイン後にコピー

三、Cookie

什么是cookie?
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

有关cookie的例子：
名字 cookie
当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie
当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

日期 cookie
当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie(&#39;username&#39;)
if (username!=null && username!="")
  {alert(&#39;Welcome again &#39;+username+&#39;!&#39;)}
else 
  {
  username=prompt(&#39;Please enter your name:&#39;,"")
  if (username!=null && username!="")
    {
    setCookie(&#39;username&#39;,username,365)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

ログイン後にコピー

以上就是JavaScript之JS Window详解<二> 的内容，更多相关内容请关注PHP中文网（www.php.cn）！