我有一个多层下拉菜单（使用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>更多推荐
如何在不插入整个代码的情况下嵌入现有的多级下拉菜单？
发布评论