图像未加载到HTML页面的jQuery load（）中

I am using following code to load a html page inside a div,

我使用以下代码在div中加载一个html页面,

$("#htmlViewer").load("conversion_test/to_convert_3264/"+getPageName(pageCount)+".htm", function(response, status, xhr) {
                   if (status == "error") {
                     /* var msg = "Sorry but there was an error: ";
                     $("#error").html(msg + xhr.status + " " + xhr.statusText); */
                     jAlert('Unexpected Error : Please try again later', 'Alert');
                     pageCount--;
                   }
                 });

In the above code I am getting only the HTML text but I am not getting CSS and the images in that page. To get the CSS I added another Ajax request. Without this the page loaded in ajax call will not have the css styles applied.

在上面的代码中,我只获取HTML文本,但我没有获得CSS和该页面中的图像。为了获得CSS,我添加了另一个Ajax请求。如果没有这个,在ajax调用中加载的页面将不会应用css样式。

$.ajax({
            url:"conversion_test/to_convert_3264/style.css",
            success:function(data){
                 $("<style></style>").appendTo("head").html(data);
            }
        })

I am not sure this is the right way to go about it. The problem is I am not getting the images during the ajax call. The images come from conversion_test/to_convert_3264/images folder. Any help is greatly appreciated. Please let me know If I need to give more details.

我不确定这是正确的方法。问题是我在ajax调用期间没有得到图像。图像来自conversion_test / to_convert_3264 / images文件夹。任何帮助是极大的赞赏。请告诉我如果需要提供更多详细信息。

Thanks in advance.

提前致谢。

2 个解决方案

#1

Will write this as an answer so its a bit more obvious than just the comment thread:

将此写为答案,因此它比评论线程更明显:

The problem is that the calling page is not located in the same folder as the page being called. The target page references the images with relative paths, and thus when its inserted into the calling page, those references no longer match. In other words, the context of the page has changed.

问题是调用页面与被调用页面不在同一文件夹中。目标页面使用相对路径引用图像,因此当它插入调用页面时,这些引用不再匹配。换句话说,页面的上下文已经改变。

There are two possible solutions:

有两种可能的解决方案:

Use absolute paths for the images so that the context doesn't matter.

使用图像的绝对路径,以便上下文无关紧要。

Use jQuery to fix the paths in the received html (Dilip came up with the code for this himself in his answer).

使用jQuery来修复收到的html中的路径(Dilip在他的回答中提出了自己的代码)。

2 个解决方案

#1

更多相关文章

随机推荐