자바스크립트를 사용하여 div에 HTML 페이지를 로드하려면 어떻게 해야 합니까?
.html 에 로드하고 .<div id="content">.
<div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
<div id ="content"> </div>
<script>
function load_home(){
document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
}
</script>
파이어폭스를 사용할 때는 잘 작동합니다.구글 크롬을 사용하면 플러그인을 요청합니다.구글 크롬에서 작동하려면 어떻게 해야 합니까?
저는 마침내 제 문제에 대한 답을 찾았습니다.해결책은
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
API 가져오기
function load_home (e) {
(e || window.event).preventDefault();
fetch("http://www.yoursite.com/home.html" /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("content").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
XHR API
function load_home (e) {
(e || window.event).preventDefault();
var con = document.getElementById('content')
, xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
con.innerHTML = xhr.responseText;
}
}
xhr.open("GET", "http://www.yoursite.com/home.html", true);
xhr.setRequestHeader('Content-type', 'text/html');
xhr.send();
}
조건에 하고 은 ajax가 .load_home()기능
jQuery load 함수를 사용할 수 있습니다.
<div id="topBar">
<a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">
</div>
<script>
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("content.html");
});
});
</script>
죄송합니다. 로드가 아닌 온클릭을 위해 편집되었습니다.
HTML을 현대 자바스크립트 방식으로 가져오기
이 은 합니다와 합니다.async/await고.fetch합니다. HTML을 텍스트로 다운로드한 후, 이를 인터넷에 공급합니다.innerHTML당신의 컨테이너 요소에 대한.
/**
* @param {String} url - address for the HTML to fetch
* @return {String} the resulting HTML string fragment
*/
async function fetchHtmlAsText(url) {
return await (await fetch(url)).text();
}
// this is your `load_home() function`
async function loadHome() {
const contentDiv = document.getElementById("content");
contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}
await (await fetch(url)).text()좀 까다로워 보이지만 설명하기 쉽습니다.이것은 두 개의 비동기적인 단계를 가지며, 당신은 이 함수를 다음과 같이 다시 쓸 수 있습니다.
async function fetchHtmlAsText(url) {
const response = await fetch(url);
return await response.text();
}
자세한 내용은 fetch API 설명서를 참조하십시오.
저는 이걸 보고 꽤 멋지다고 생각해서 테스트를 해봤습니다.
깔끔한 접근법으로 보이지만, jQuery load 기능이 있는 페이지를 로드하는 데 걸리는 시간이나 XMLHtpRequest의 바닐라 자바스크립트 접근법을 사용하는 데 걸리는 시간에 비해 성능 면에서 50% 정도 뒤쳐지고 있습니다.
이것은 후드 아래에서 페이지가 완전히 동일한 방식으로 제공되지만 완전히 새로운 HTML 요소 객체를 구성해야 하기 때문이라고 생각합니다.
요약해서 jQuery를 사용할 것을 제안합니다.구문은 최대한 쉽게 사용할 수 있으며 사용자가 사용할 수 있도록 잘 구조화된 콜백 기능을 갖추고 있습니다.또한 상대적으로 빠릅니다.바닐라 접근법은 눈에 띄지 않는 몇 밀리초만큼 더 빠를 수 있지만, 구문은 혼란스럽습니다.jQuery에 접근할 수 없는 환경에서만 사용합니다.
여기 제가 테스트할 때 사용한 코드가 있습니다. 이 코드는 상당히 초보적이지만 여러 번의 시도에서 시간이 매우 일관되게 돌아왔기 때문에 각 경우에 약 +-5ms로 정확하다고 할 수 있습니다.테스트는 Chrome에서 홈 서버에서 실행되었습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
/**
* Test harness to find out the best method for dynamically loading a
* html page into your app.
*/
var test_times = {};
var test_page = 'testpage.htm';
var content_div = document.getElementById('content');
// TEST 1 = use jQuery to load in testpage.htm and time it.
/*
function test_()
{
var start = new Date().getTime();
$(content_div).load(test_page, function() {
alert(new Date().getTime() - start);
});
}
// 1044
*/
// TEST 2 = use <object> to load in testpage.htm and time it.
/*
function test_()
{
start = new Date().getTime();
content_div.innerHTML = '<object type="text/html" data="' + test_page +
'" onload="alert(new Date().getTime() - start)"></object>'
}
//1579
*/
// TEST 3 = use httpObject to load in testpage.htm and time it.
function test_()
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
content_div.innerHTML = xmlHttp.responseText;
alert(new Date().getTime() - start);
}
};
start = new Date().getTime();
xmlHttp.open("GET", test_page, true); // true for asynchronous
xmlHttp.send(null);
// 1039
}
// Main - run tests
test_();
</script>
</body>
</html>
해라
async function load_home(){
content.innerHTML = await (await fetch('home.html')).text();
}
async function load_home() {
let url = 'https://kamil-kielczewski.github.io/fractals/mandelbulb.html'
content.innerHTML = await (await fetch(url)).text();
}<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>사용시
$("#content").load("content.html");
그러면 XMLHtpRequest를 로드할 수 없으므로 로컬 크롬에서 "디버깅"할 수 없습니다. 이것은 작동하지 않는다는 것을 의미하는 것이 아니라 코드를 같은 도메인의 aka에서 테스트해야 한다는 것을 의미합니다.귀하의 서버
jQuery를 사용할 수 있습니다.
$("#topBar").on("click",function(){
$("#content").load("content.html");
});
$("button").click(function() {
$("#target_div").load("requesting_page_url.html");
});
아니면
document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';
<script>
var insertHtml = function (selector, argHtml) {
$(document).ready(function(){
$(selector).load(argHtml);
});
var targetElem = document.querySelector(selector);
targetElem.innerHTML = html;
};
var sliderHtml="snippets/slider.html";//url of slider html
var items="snippets/menuItems.html";
insertHtml("#main",sliderHtml);
insertHtml("#main2",items);
</script>
이것은 내 메인.html에 HTML의 일부분을 추가하려고 했을 때 나에게 효과가 있었습니다.코드 패스 클래스 또는 id에 ax를 셀렉터로 추가하고 HTML 스니펫에 대한 링크를 다음과 같이 추가하는 것을 잊지 마십시오.argHtml
github에는 콘텐츠를 요소에 로드하는 이 플러그인이 있습니다.여기 레포가 있습니다.
https://github.com/abdi0987/ViaJS
- 원격 페이지에서 html 로드(CORS 액세스 권한이 있는 경우)
- 페이지의 특정 부분에 대한 결과 html 구문 분석
- 페이지의 그 부분을 현재 페이지에 삽입합니다.
//load page via jquery-ajax
$.ajax({
url: "https://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript",
context: document.body
}).done(function(data) {
//the previous request fails beceaus we dont have CORS on this url.... just for illlustration...
//get a list of DOM-Nodes
var dom_nodes = $($.parseHTML(data));
//find the question-header
var content = dom_nodes.find('#question-header');
//create a new div and set the question-header as it's content
var newEl = document.createElement("div");
$(newEl).html(content.html());
//on our page, insert it in div with id 'inserthere'
$("[id$='inserthere']").append(newEl);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>part-result from other page:</p>
<div id="inserthere"></div>이 간단한 코드 사용
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
이것은 헤더를 포함할 때 일반적으로 필요합니다.php든 페이지든 상관없습니다.
자바스크립트에서는 특히 HTML 페이지가 있고 php include 기능을 사용하고 싶지 않다면 쉽지만 스크립트 태그에 php 기능을 작성하여 자바스크립트 기능으로 추가해야 합니다.
이런 경우에는 기능 없이 작성하고 Just라는 이름을 붙여야 합니다.함수 단어를 스크립트로 레이지하고 include 헤더를 시작합니다.php 즉, 스크립트 태그에 있는 php include 함수를 자바스크립트 함수로 변환하고 포함된 파일에 당신의 모든 내용을 담습니다.
저는 jquery를 사용해요, 더 쉽다는 걸 알았어요.
$(function() {
$("#navigation").load("navbar.html");
});
별도의 파일에 javascript 파일을 html 페이지에 로드합니다.
쇼히데
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showHide(switchTextDiv, showHideDiv)
{
var std = document.getElementById(switchTextDiv);
var shd = document.getElementById(showHideDiv);
if (shd.style.display == "block")
{
shd.style.display = "none";
std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>";
}
else
{
if (shd.innerHTML.length <= 0)
{
shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
}
shd.style.display = "block";
std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
}
}
</script>
</head>
<body>
<a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
<span style="display: block; background-color: yellow">Show</span>
</a>
<div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
</body>
</html>
showhide_embedded.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function load()
{
var ts = document.getElementById("theString");
ts.scrollIntoView(true);
}
</script>
</head>
<body onload="load()">
<pre>
some text 1
some text 2
some text 3
some text 4
some text 5
<span id="theString" style="background-color: yellow">some text 6 highlight</span>
some text 7
some text 8
some text 9
</pre>
</body>
</html>
html 파일이 로컬에 있는 경우 태그 대신 iframe을 찾습니다. 태그는 크로스 브라우저에서 작동하지 않으며 주로 플래시에 사용됩니다.
다음의 경우:<iframe src="home.html" width="100" height="100"/>
언급URL : https://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript
'programing' 카테고리의 다른 글
| 연결되는 아키텍처가 아닌 아카이브를 위해 파일이 만들어졌습니다(i386). (0) | 2023.10.11 |
|---|---|
| C#에서 XML을 작성하려면 어떻게 해야 합니까? (0) | 2023.10.11 |
| 저장된 MySql로 루프 및 선택 (0) | 2023.10.11 |
| Oracle JDBC PreparedStatement 개체에서 바인딩 매개 변수 값을 가져오는 방법 (0) | 2023.10.11 |
| es6 바닐라 자바스크립트에서 Ajax 요청 (0) | 2023.10.11 |