jquery - 使用 css 完整加载外部文件？

Question

我正在从事一个元素，客户希望将现有页面动态加载到单个页面中。这没问题，但是当页面作为现有站点上的独立文件加载时，样式无法正常工作。有没有办法从每个页面中提取 CSS 链接并将其动态应用于查看器页面？

这是我编写的将外部页面调用到查看器页面的函数的副本:

$(function () {
    $('a.dock-item2').click(function () { // click on an anchor with the dock-item2 class
        $("#page").remove();             // remove what's in the viewer already
        var href = $(this).attr('href'); // grab the external file path and name
        $('<div id="page" />').load(href, function () { // create a new div and load 
            // the page content
            $(this).hide()               // just stuff to make a nice transition...
                .appendTo('#viewer')
                .fadeIn(1000);
        });
        return false;
    })
});

我想将它严格应用于所讨论的 div……但这也许不是最好的做法。我应该考虑将这些东西加载到 iframe 中吗？也许现在才周五，我无法再理性思考了。

Answer 1

使用 jQuery 的 ajax 功能很难/不可能从远程页面获取非正文标签(正文中不存在的标签)。也就是说，如果是这种情况，您可以在本地设置一个 PHP 脚本来充当中间人。它可以读取页面内容，找到 css 文件，然后返回该文件，甚至返回 css 文件本身的内容 - 然后您可以动态地将它放在您的页面上。这应该不会太难，特别是如果你使用类似 phpQuery 的东西来获取 <script>。标记，甚至是类似于 phpQuery 的 PHPSimpleHTMLDOMParser。

所有假设，但它可能会起作用；)当然，如果您只想加载 iframe，您可以。这将使所有链接在 iframe 中保持可操作。