3

我正在使用以下代码在 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--;
                   }
                 });

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

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

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

提前致谢。

4

2 回答 2

2

我终于根据@MiikaL 的建议进行了修复。以下是我解决问题的代码。

function replaceImageSource() {
       $("img").each( function(){
              $(this).attr({
                 src: 'conversion_test/to_convert_3264/' + $(this).attr('src')
              });
            });
    }

希望这对某人有所帮助。感谢你的帮助。

于 2012-08-23T07:30:37.067 回答
2

将其写为答案，因此它比评论线程更明显：

问题是调用页面与被调用页面不在同一个文件夹中。目标页面引用具有相对路径的图像，因此当其插入调用页面时，这些引用不再匹配。换句话说，页面的上下文发生了变化。

有两种可能的解决方案：

  1. 使用图像的绝对路径，以便上下文无关紧要。
  2. 使用 jQuery 修复接收到的 html 中的路径（Dilip 在他的回答中自己提出了这个代码）。
于 2012-08-23T07:36:36.260 回答