찾다
웹 프론트엔드HTML 튜토리얼HTML 웹페이지의 URL 표현_HTML/Xhtml_웹페이지 제작

HTML에서 공통 URL에는 다양한 표현이 있습니다.
상대 URL:

코드 복사
코드는 다음과 같습니다.

example.php
demo/example.php
./example.php
../../example.php
/example.php

절대 URL:

코드 복사
코드는 다음과 같습니다.

http://jb51.net/example.php
http://jb51.net:80/example.php
https://jb51.net/example.php

동시에 HTML에는 URL인 요소 속성 값이 많이 있습니다. 일반적으로 JavaScript를 사용하여 이러한 URL 속성 값을 얻는 방법에는 두 가지가 있습니다.

코드 복사
코드는 다음과 같습니다.

이번 페이지의 절대 URL은 http://jb51.net/
<script>var oA = document.getElementById('example -a'); <br />oA.href == 'http://jb51.net/example.php' ; <br />oA.getAttribute('href') == 'example.php'<br />&lt ;/script> <br /><br /></script>
속성에 직접 액세스하여 완전한 절대 URL을 얻으려고 합니다. 실제로 이것은 모든 A 중에서 비교적 이상적인 결과입니다. 수준의 브라우저에서는 Firefox와 IE8만이 이 결과를 성공적으로 얻을 수 있습니다. 다른 브라우저에는 다소 특별한 상황이 있습니다. 어떤 요소가 존재하는지에 대한 데모 예를 참조하세요.
대부분의 브라우저에서 문제는 두 방법 모두 원래 속성 값을 반환한다는 것입니다. 그러나 실제 응용 프로그램에서는 종종 절대 URL이 필요합니다. "정규화되지 않은 HREF 값 처리"의 해결 방법은 너무 복잡합니다. 브라우저 코드의 차이를 고려하지 않는다면 매우 간단한 솔루션입니다.
페이지는 http://jb51.net/




코드를 복사하세요코드는 다음과 같습니다. 다음:
<script> <div class="msgborder" id="phpcode42">var oForm = document.getElementById('example-form') <br />//IE6, IE7, Safari, Chrome, Opera <br />oForm .action == 'example.php'; <br />oA.getAttribute('action') == 'example.php'; <br />//절대 URL을 얻는 일반적인 솔루션<br />getQualifyURL(oForm,'action' ) == 'http://jb51.net/example.php'; <br />getQualifyURL = function(oEl,sAttr){ <br />var sUrl = oEl[sAttr], <br />oD, <br />bDo = false <br />//IE8 이전 버전인가요<br />//http://www.thespanner.co.uk/2009/01/29/Detecting-browsers-javascript-hacks/ <br />//http :/ /msdn.microsoft.com/en-us/library/7kx09ct1(VS.80).aspx <br />/*@cc_on <br />try{ <br />bDo = @_jscript_version < 5.8 ?true: @false ; <br />}catch(e){ <br />bDo = false <br />} <br />@*/ <br />//Safari, Chrome 및 Opera인 경우 <br />if(/a/.__proto__ ==' //' || /source/.test((/a/.toString '')) <br />|| /^function (/.test([].sort)){ <br />bDo = true ; <br />} <br />if(bDo){ <br />oD = document.createElement('div') <br />/* <br />//DOM 작업 결과는 변경되지 않습니다. <br />var oA = document.createElement('a'); <br />oA.href = oEl[sAttr] <br />oD.appendChild(oA) <br />*/ <br />oD.innerHTML = ['<a href="' ,sUrl,'">'].join(''); <br />sUrl = oD.firstChild.href; <br />return sUrl; <br />&lt ;/script> <br /><br /><br />두 선사시대 브라우저 IE6과 IE7에 대해 좀 더 흥미로운 점이 있습니다. HTML 요소 A, AREA 및 IE7에서 두 가지 메소드로 얻은 속성 값입니다. IMG는 절대 URL입니다. 다행히 Microsoft는 이 문제를 해결하기 위해 getAttribute에 대한 두 번째 매개 변수를 제공합니다. 동시에 IFEAM 및 LINK 요소에 대한 원래 속성을 반환하는 위에서 언급한 두 가지 메서드의 문제도 해결할 수 있습니다. ><br /><br /> <br /><br />코드 복사<br><div class="msgheader"><div class="right">코드는 다음과 같습니다.<span style="CURSOR: pointer" onclick="copycode(getid('phpcode43'));"><div class="msgborder" id="phpcode43"> <br /><link href="../../example.css" id="example-link"> <br /><a href="example.php" id="example-a">此时页face绝对URL是http://jb51.net/ <br /><스크립트> <br />var oA = document.getElementById('example-a'), <br />oLink = document.getElementById('example-a'); <br />oA.href == 'http://jb51.net/example.php'; <br />oA.getAttribute('href') == 'http://jb51.net/example.php'; <br />oA.getAttribute('href',2) == 'example.php'; <br />oLink.href == 'example.php'; <br />oLink.getAttribute('href') == 'example.php'; <br />oLink.getAttribute('href',4) == 'http://jb51.net/example.php'; <br /></script>
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性吗html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PM

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경