logo标签列表

从Javascript加载另一个HTML页面

javascripthtml
24

能否从 HTML 页面加载 JavaScript 程序，然后让 JavaScript 加载另一个 HTML 页面而不是加载程序的页面？

2
“Load”是什么意思？你是指以下哪种情况：1）HTML页面加载；2）使用<script>标签引用JS文件；3）该JS文件更改浏览器的位置到另一个页面或者 3）该JS文件加载部分HTML页面并将其用于更新当前页面的某个部分。 - Doug Neiner
第一个。Javascript文件使用<body>标签中的onload参数进行加载。然后，Javascript文件显示完全不同的页面。 - Pranav
我认为我已经正确回答了。你所说的不可能，因为这违反了同源策略。 - rook
5个回答
35

可以。在 JavaScript 代码中：

window.location.href = "http://new.website.com/that/you/want_to_go_to.html";
2
但请注意，此脚本不包含/执行在新页面上！否则您将会得到一个递归调用。 - user57508
最好使用为此目的创建的函数（由所有浏览器支持），而不是使用赋值技巧。location.assign和location.replace函数。 - Blaine
@Blaine，你能指出哪些函数吗？可以给我代码吗？ - jkr
@jkr 正如我所说，location.assign和location.replace。它们显然需要一个字符串作为参数。如果你不知道如何根据函数名和参数调用函数，我认为你不适合编程。 https://www.w3schools.com/jsref/met_loc_assign.asp 和 https://www.w3schools.com/jsref/met_loc_replace.asp。 - Blaine
11
你可以包含一个.js文件，其中包含设置

标签样式的脚本。

window.location.href = url;

url是您希望加载的网址。

8

是否有可能（仅在线工作并仅加载您的页面或文件）：https://w3schools.com/xml/xml_http.asp 尝试我的代码：

function load_page(){
qr=new XMLHttpRequest();
qr.open('get','YOUR_file_or_page.htm');
qr.send();
qr.onload=function(){YOUR_div_id.innerHTML=qr.responseText}
};load_page();

可以使用qr.onreadystatechange代替qr.onload。

这是问题的答案，而不是将重定向到另一页的href更改。相反，它将作为字符串获取所请求文件的原始源代码。 - Rafe
0
你可以使用以下代码：
<!DOCTYPE html>
<html>
    <body onLoad="triggerJS();">

    <script>
        function triggerJS(){
        location.replace("http://www.google.com");
        /*
        location.assign("New_WebSite_Url");
        //Use assign() instead of replace if you want to have the first page in the history (i.e if you want the user to be able to navigate back when New_WebSite_Url is loaded)
        */
        }
    </script>

    </body>
</html>
0
除了 window.location.replace() 或 window.location.assign() 或 window.location.href 或 window.open() 这些方法之外，还有一种方法是触发表单提交：
var form = document.createElement("form");
form.method = "POST";
form.action = "//test.local/login.php";
form.target = "_blank";
form.style.display = 'none';

var input1 = document.createElement("input");
input1.value = "123";
input1.name = "param1";
form.appendChild(input1);

var input2 = document.createElement("input");
input2.value = "abc";
input2.name = "param2";
form.appendChild(input2);

document.body.appendChild(form);
form.submit();

你可以将表单的method属性改为GET：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form#method
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接