在一个html页面中想用JavaScript代码引用另一个abc.html页面,代码怎么写?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在一个html页面中想用JavaScript代码引用另一个abc.html页面,代码怎么写?相关的知识,希望对你有一定的参考价值。

比如用123.html,里面加上一行代码,直接引用abc.html页面里的内容,就像<iframe>一样的效果。(不过<ifrarme>引用的话,不能使被引用的内容的全局字体、颜色等值和引用页(123.html)的相同,不知道javascript引用的行不行?

谢谢!!
能不能给下代码呀,谢谢。。我对动态的代码一窃不通。。
--------
回二楼:样式的话,不考虑也行,我可以在abc.html里加个link css,应该没问题的。不知道在123.html中用ajax或javascript调用abc.html的内容,代码应该怎么写?
--------
回答者: helloworld1987 ,两个方法能否都给一下完整代码?非常感谢!我对这些都不懂。HTML标签也没懂几个,对shtml一点都不了解。。。

1.使用shtml,inlcude指令可以包含另一个文件
2.使用ajax动态将abc.html内容请求过来,并写入到123.html中的一个div中

例如:
在123.shtml文件中(注意,必须是shtml文件)
然后在页面中写上<!--#include file="abc.html"-->指令,这样就可以将abc.html包含到abc.shtml文件中了。

或者使用ajax,如:使用jquery
$('#content').load('abc.html');
这样就可以将abc.html页面的内容动态加载到id为content的元素中显示。

至于具体的代码,你可以百度一下“SHTML include”或“jQuery load”,有许多类似的结果。
参考技术A 通过嵌套iframe 实现嵌套html页面
<script type="text/javascript">
$(function ()
document.getElementById("ifm").src ="";//Url地址
$("#ifm").load(function ()
var h = document.body.clientHeight;
var w = document.body.clientWidth;
document.getElementById("ifm").height = h + "px";
document.getElementById("ifm").width = w + "px";

);
)
</script>
<body style="overflow-y:hidden;overflow-x:hidden">
<div id="pageone" style="">
<iframe name="ifm" id="ifm" scrolling="yes" style="background-color: transparent;" marginwidth="0" marginheight="0" frameborder="0">
</iframe>
</div>
</body>
参考技术B 如果你是静态页面的话,嵌入其他的网页到本网页中,目前我知道的只有<iframe>,但是<iframe>有缺点,不能自适应宽高。
如果你要应用JavaScript的话
有两种方式可以解决你目前的问题:
1.应用<link href="js.js" type="text/css" rel="stylesheet" />但是要在页面里面添加<script>里面调用js.js里面的参数</script>
2.就是自己做一个js效果的网页(里面的东西都做好了,只有js的效果),和平常一样调用<iframe>就行了,很简单。
参考技术C redlz2500说的没问题
如果要保持样式一样的话,需要做的事情比较复杂的……
所以要不就用iframe吧
参考技术D ajax远程读取,然后处理abc页面里面的css
跨域的话要特殊处理

如何使用 Javascript 打开另一个 HTML 页面

【中文标题】如何使用 Javascript 打开另一个 HTML 页面【英文标题】:How to open another HTML page using Javascript 【发布时间】:2015-02-24 18:52:55 【问题描述】:

我正在开发一个网站,并想通过在 javascript 中编写一些代码来减少页面数量。我在一个页面上有一个表格,可以将您带到其他 15 个页面。所以我想打开一个页面,将 15 个页面的所有信息组合在一起,并根据点击表格的链接显示内容。我的表格数据之一如下

<td><a style="color:black;" onClick="openCompiler()">C++ Compiler</a></td>

点击链接时我正在触发事件调用openCompiler()

function openCompiler()

    window.open("mypage.html")
    document.getElementById(compiler).style.display="block";

在页面中我有一个包装器(称为编译器),它最初没有显示,但当点击链接时,它会打开页面并显示包装器(称为编译器)。

我的上述努力都失败了,正在寻找另一种方法:

1) The window.open() 无法打开我文件夹中的 HTML 文件。

2我不确定document.getElementById(compiler).style.display="block";是否在当前页面中寻找名为compiler的元素。

我在寻找什么:

1) 一种使用 javascript 打开另一个 html 页面的方法。

2) 一种在新页面上从初始页面(带有表格的页面)设置元素样式的方法。

感谢所有帮助 :)

【问题讨论】:

打开的页面是否必须在新标签/窗口中? window.open 返回对新打开窗口的引用 mypage.html 一个名称为 mypage 的对象,属性 html 包含 URL,或者您只是缺少引号,因为它 is 已经是名称 @ 987654330@ @AxelAmthor 缺少引号 @lucasem 不应该是 【参考方案1】:

放弃window.open

创建一个 iframe:

var compiler = document.createElement('iframe');
compiler.src = "mypage.html";
compiler.id = "compiler";

把它放在你想要的地方:

document.getElementById("compilercontainer").appendChild(compiler);

改变它:

compiler = document.getElementById("compiler");
var comdoc = compiler.contentWindow.document;
var style = comdoc.createElement('style');
style.innerHTML = ".foo color:orange";
comdoc.head.appendChild(style);

这可能会用 JQuery 变得更整洁,但没有标记(我个人更了解纯 JS DOM 操作)

【讨论】:

当这是 WIN 系统上的本地文件时,请尝试 "./mypage.html" 并检查大小写 ("MyPage.HTML")!【参考方案2】:

这不能按照您设计的方式工作。根据定义,新窗口中新文档的加载是异步的,见这里https://developer.mozilla.org/en-US/docs/Web/API/Window.open

因此,在“open”调用之后立即设置样式肯定会失败,因为此时不得加载具有相应元素(“编译器”)的文档,而且很可能不会加载。

您实际上可以做的是,加载文档并等待onready 事件,但只能在新窗口中进行,然后在那里进行所有设置。您也可以像这样从源窗口制作文档:

newWindow = window.open("", "Compiler", "" );
doc = newWindow.document;
doc.open("text/html","replace");
doc.writeln('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">');
doc.writeln("<html>");
doc.writeln("<head>");
....
doc.writeln("</html>");
doc.close();

只是一个想法。

【讨论】:

所以我必须重做整个文档以使其按我想要的方式工作?【参考方案3】:

这里有一些问题:)

1) 使用window.location="mypage.html" 跳转到新页面(记住双引号,单引号也可以)

2) 你似乎忘记了双引号:document.getElementById("compiler").style.display="block";

3) 你不能从你的函数中引用“编译器”元素,因为当你到达那里时,你已经加载了新页面。 你可以这样做:

window.location="mypage.html?id=compiler"

在你的 mypage.html 中:

<head>
<script>
function display() 
  var id = parseURL();
  document.getElementById(id).style.display="block";

function parseURL() 
   refer to: https://***.com/questions/831030/how-to-get-get-request-parameters-in-javascript

</script>
</head>
<body onload="display()">
....

想法是通过GET参数将要显示的元素的id传递给新页面,然后从新页面的URL中取回。 参考How to get "GET" request parameters in JavaScript?

毛罗

【讨论】:

【参考方案4】:

如果您尝试打开一个 html 文件,您可以从同一文件夹中使用以下 javascript 代码 :

 location.replace("./name_of_the_file.html")

不要忘记双引号。 如果你想打开另一个网站,你可以使用下面的javascript代码:

 location.replace("https://***.com")

【讨论】:

以上是关于在一个html页面中想用JavaScript代码引用另一个abc.html页面,代码怎么写?的主要内容,如果未能解决你的问题,请参考以下文章

C#中想用messageBox这个类,为啥要添加引用才能使用求解答

在c++的控制台程序中想用mfc的类如Cstring怎么办啊

delphi中想用imagelist添加opendialog等图标到toolbutton上 这个图标在哪?

Android studio 中想用 HttpClient 下载网络图片,却没有 HttpClient 以及相关的类

是否可以在 iFrame 中使用 JavaScript 获取 iFrame 父页面的引用者?

html中想让一部分内容一直显示在页面的最下方,页面内容不足一屏时显示在这一屏的最下方