jQuery .load() - 角落插件在 IE 中不起作用 - Firefox 可以

发布于 2024-10-12 22:40:59 字数 2938 浏览 5 评论 0原文

我有两个简单的页面用于测试。

在我的第一页上，我使用 $.load() 从第二页加载 div 。

两个页面都包含用于转弯的插件。如果我加载从第二页加载 div 的第一页，则转弯不起作用。但是，如果我自己加载第二页，则转弯确实有效，因此它与 $.load() 有关。

以下是第 1 页中的一些代码：

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#load").load('testLoadCornering2.aspx #loadMe');   
            });
        </script>

        <script src="resources/js/curvycorners.js" type="text/javascript"></script>

        <script src="resources/js/curvycorners.src.js" type="text/javascript"></script>

        <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="load" class="BWTable">
        </div>
        </form>
    </body>
    </html>

您会看到页面尝试加载第二个 div。

第二页：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script src="resources/js/curvycorners.js" type="text/javascript"></script>

    <script src="resources/js/curvycorners.src.js" type="text/javascript"></script>

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="loadMe" class="BWTable">
        <p>
            Test Test Test Test Test Test Test
        </p>
    </div>
    </form>
</body>
</html>

以及它用于圆角的 CSS（以及圆角插件）：

 background-image: url(         '../../images/wp_form2.gif' );
 border: solid 1px #000000;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 color: white;
 -moz-border-radius: 10px; /* Rounded corners plugin */
 -webkit-border-radius: 10px; /* Rounded corners plugin */

在 Firefox 中，这工作正常 - 但在 IE 中（特别是我一直在尝试的版本 8），角从不圆角。

重申一下，只有在使用 .load() 方法时，才能正确手动转到 IE 8 角的第二页。

任何帮助表示赞赏。

注意：我知道我不需要在两个页面等上添加样式表，因为它们应该从第一页加载，但我添加它们是为了向您展示它正在尝试执行的操作的完整代码。谢谢，瑞奇

原文

I have two simple pages I'm using for testing.

On my first page, I use $.load() to load a div from the second page.

Both pages contains the plugin to do the cornering. If I load the first page which loads the div from the second page, the cornering does not work. However, if I load the second page myself, the cornering does work so it's to do with $.load().

Here's some code, from page 1:

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#load").load('testLoadCornering2.aspx #loadMe');   
            });
        </script>

        <script src="resources/js/curvycorners.js" type="text/javascript"></script>

        <script src="resources/js/curvycorners.src.js" type="text/javascript"></script>

        <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="load" class="BWTable">
        </div>
        </form>
    </body>
    </html>

You see the page trying to load the second div.

And the second page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script src="resources/js/curvycorners.js" type="text/javascript"></script>

    <script src="resources/js/curvycorners.src.js" type="text/javascript"></script>

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="loadMe" class="BWTable">
        <p>
            Test Test Test Test Test Test Test
        </p>
    </div>
    </form>
</body>
</html>

And the CSS it uses for the rounding (along with the rounded corners plugin):

 background-image: url(         '../../images/wp_form2.gif' );
 border: solid 1px #000000;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 color: white;
 -moz-border-radius: 10px; /* Rounded corners plugin */
 -webkit-border-radius: 10px; /* Rounded corners plugin */

In Firefox, this works fine - but in IE (specially version 8 I've been trying) the corners are never rounded.

To reiterate, manually going to the second page in IE 8 corners correctly, it's only when the .load() method is used.

Any help appreciated.

Note: I'm aware I shouldn't need to add the style sheets on both pages etc as they should be loaded from the first page, but I've added them to show you the full code of what it's trying to do.
Thanks,
Ricky

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

↘人皮目录ツ 2024-10-19 22:40:59

这里的问题是，curvycorners 只会在 IE 中出现，因为 Firefox 完全支持 CSS3 圆角，所以当它在 Firefox 中工作时，这只是因为 curvycorners 没有尝试做任何事情。

您的 JQuery 加载被放置在文档就绪块中，因此在加载整个页面（包括（我相信）javascript）之前不会执行，因此 curvycorners 在加载第二个页面 div 之前运行。您需要找到一种方法来在第二个页面 div 之后加载 curvycorners 脚本，或者找出如何在加载第二个页面 div 后调用 curvycorners 来重新解析页面。

来自 curvycorners 文档：

如果您需要更改某些属性
或可重绘元素的样式，
这不应该直接完成
通过 DOM。相反，有
识别 DOM 对象（例如
document.getElementById())，调用
curvyCorners.调整(DOMObj, 属性名称，新值）；
地点：
DOMObj 是元素对象
需要的className curvyRedraw
改变了；
propertyName 是名称
没有前导点的属性；如果
它是一个样式属性，它应该是
表示为“style.property”。
newValue 是新值，例如
'没有任何'。
curvyCorners.adjust() 必须
取所描述的所有三个参数
多于。它没有返回任何有用的值。

回复收藏 0 原文

难如初 2024-10-19 22:40:59

谢谢拉撒路。你让我走上了正确的道路，我已经找到了解决方案，这有效。我现在感觉有点傻！

再次感谢。

第 1 页：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {

        $("#load").load('testLoadCornering2.aspx #loadMe');  

            $.getScript('resources/js/curvycorners.js', function() {
                $(this).init();
            });
            $.getScript('resources/js/curvycorners.src.js', function() {
                $(this).init();
            });        
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="load" class="BWTable">
    </div>
    </form>
</body>
</html>

第 2 页：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>  
</head>
<body>
    <form id="form1" runat="server">
    <div id="loadMe" class="BWTable">
        <p>
            Test Test Test Test Test Test Test
        </p>
    </div>

    </form>
</body>
</html>

Thanks Lazarus. You put me on the right tracks and I've worked out the solution, this works. I feel a bit silly now!

Thanks again.

Page 1:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {

        $("#load").load('testLoadCornering2.aspx #loadMe');  

            $.getScript('resources/js/curvycorners.js', function() {
                $(this).init();
            });
            $.getScript('resources/js/curvycorners.src.js', function() {
                $(this).init();
            });        
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="load" class="BWTable">
    </div>
    </form>
</body>
</html>

Page 2:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>  
</head>
<body>
    <form id="form1" runat="server">
    <div id="loadMe" class="BWTable">
        <p>
            Test Test Test Test Test Test Test
        </p>
    </div>

    </form>
</body>
</html>

回复收藏 0 原文

~没有更多了~