如何在不插入整个代码的情况下嵌入现有的多级下拉菜单？ [英] How can I embed an existing multi-level drop down menu without inserting the whole code?
问题描述
我有一个多层下拉菜单（使用HTML + CSS完成），我想将其放置在许多不同的页面上。以后，我将需要更新此菜单并更改其内容，因此我将HTML保存在了自己的文件中，这样我就可以一次将所有页面的更改发布到屏幕上（而不必遍历每个页面重复
I have a multi-level drop down menu (done using HTML + CSS) that I want to put on a number of different pages. In the future I will need to update this menu and change its contents, so I have saved the HTML in its own file so that I can roll out the changes to all the pages at once (instead of having to go through each page and repeatedly paste in the changed list items).
我尝试过使用iframe，但这会切断菜单项的高度限制（设置足够大的手动高度会留下吨的空白空间，当然）：
I have tried using iframe, but this cuts off the menu items with its limited height (setting a manual height that's big enough would leave tons of blank space, of course):
<iframe height="100%" src="menu.html" frameborder="no" width="100%" scrolling="no"></iframe>
我也尝试使用embed（在您将鼠标悬停在菜单项上之前，它看起来还不错，它会滚动
I also tried using embed (this looks fine until you mouse over the menu items -- it just scrolls within the frame):
<embed type="text/html" src="menu.html" width="100%" height="100%"></embed>
当将代码简单地转储到我需要的各个页面中时，菜单功能正常知道那不是问题。问题在于嵌入并从其自己的HTML文件中调用。有没有简单的方法可以使下拉菜单按原样显示？
The menu functions fine when the code is simply dumped into the individual pages I need it on, so I know that's not the issue. It's the embedding and calling it from its own HTML file that is the problem. Is there a simple way to do this that will allow the drop-down menu to appear as it should?
我应该提一下，尽管我有IT部门的帮助这个，这是他们不支持的项目。我只能在正文中编辑网页的HTML，而不能在头部中编辑。我上传为文件的HTML页面（如菜单代码）是例外。因此，存在一些约束。
I should mention that while I have my IT department's blessing to do this, this is a project that they aren't supporting. I can only edit the HTML of my webpages in the body, and not the head. The exception being HTML pages I upload as files (like the menu code). So there are some constraints.
推荐答案
下面是一段冗长的javascript方法，可能会使您的IT人员满意：
Well here is a bit of a long winded javascript approach that might keep your IT guys happy:
window.onload = new Function("load('embed-me.html','content')"); // Replace with URL of your file and ID of div you want to load into.
function ahah(url, target) {
document.getElementById(target).innerHTML = ' Fetching data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}
function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}
}
function load(name, div) {
ahah(name,div);
return false;
}
不是我写的（ LINK ）（我刚刚添加了在网页上运行加载位）。
Not written by me(LINK) (I just added the run on page load bit).
经过测试且可以正常工作（至少在Chrome中）。虽然如果用户禁用了javascript，则您的网站将没有菜单！
Tested and working (in Chrome at least). Though your site will have no menu if the user has javascript disabled!
编辑：
示例...
<body>
<script type="text/javascript" src="embed-me.js"></script> <!-- load the javascript -->
<div id="content"></div> <!-- html will be embedded here -->
</body>
这篇关于如何在不插入整个代码的情况下嵌入现有的多级下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
