Создайте iframe и правильно установите его базовый тег с помощью jquery

Question

* ОБНОВЛЕНО *

Я пытаюсь установить базовый тег динамически созданного iframe. Все работает, если я установил базовый тег в корневой каталог (http://example.com/) и сделал ссылки в файле src включающими путь от базы. Однако, если я установлю базу для включения пути к папке (http://example.com/Test/), будут работать только ссылки. Я пытался заставить это работать правильно в течение нескольких дней.

ПРИМЕЧАНИЕ. Корневой URL-адрес одинаков для файла src и всех ссылок, поэтому это не проблема междоменного доступа.

index.html

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
    // First frame ** WORKS **
    $('<iframe id="iFrame1" src="Test/test1.html"/>').load(function(){
        var baseTag= document.createElement('base');
        baseTag.href = "http://aquawicket.com/";
        $('#iFrame1').contents().find('head').append(baseTag);
    }).appendTo('body');

    // Second frame ** WORKS **
    $('<iframe id="iFrame2" src="Test/Files/test2.html"/>').load(function(){
        var baseTag= document.createElement('base');
        baseTag.href = "http://aquawicket.com/Debug/Test/Files/";
        $('#iFrame2').contents().find('head').append(baseTag);
    }).appendTo('body');

    // Third frame ** DOES NOT WORK **  need this to work
    $('<iframe id="iFrame3" src="Test/test3.html"/>').load(function(){
        var baseTag= document.createElement('base');
        baseTag.href = "http://aquawicket.com/Debug/Test/Files/";
        $('#iFrame3').contents().find('head').append(baseTag);
    }).appendTo('body');
});
</script>

test1.html РАБОТАЕТ

<script type="text/javascript" src="/Debug/Test/Files/javascript.js"></script> 
iFrame1<br>
<a href="/Debug/Test/Files/hello.html">LINK</a><br>
<img src="/Debug/Test/Files/image.png" />
<input type="button" value="Test" onClick="TestJava()"/>

test2.html РАБОТАЕТ

<script type="text/javascript" src="javascript.js"></script> 
iFrame2<br>
<a href="hello.html">LINK</a><br>
<img src="image.png" />
<input type="button" value="Test" onClick="TestJava()"/>

test3.html НЕ РАБОТАЕТ, нужен этот для работы

<script type="text/javascript" src="javascript.js"></script> 
iFrame3<br>
<a href="hello.html">LINK</a><br>
<img src="image.png" />
<input type="button" value="Test" onClick="TestJava()"/>

В iFrame1 мы устанавливаем базу для корня домена (http://root.com/), и все ссылки в файле test.html включают путь (/Path/Path/Path/file.xxx). Работает хорошо.

В iFrame2 мы устанавливаем для базы полный путь к файлам ссылок (http://root.com/Path/Path/Path), и ссылки не должны включать путь, если файл test.html находится в той же папке, что и файл. файлы ссылок (file.xxx). Это также хорошо работает.

В iFrame3 мы устанавливаем для базы полный путь к файлам ссылок (http://root.com/Path/Path/Path), и все ссылки НЕ будут работать, если файл test.html НЕ находится в той же папке, что и файл. файлы ссылок (file.xxx). Это не работает для изображений и.js включает. Это работает только для ссылок.

Я загрузил живую версию для этой проблемы здесь http://aquawicket.com/Debug

Answer 1

Во-первых, я предполагаю, что это ошибка, что у вас есть строка, устанавливающая src attr iframe как внутри функции загрузки, так и после нее. Я попробовал ваш код, и строка внутри функции load создала бесконечную рекурсию, iframe продолжал загружаться сам.

Во-вторых, кроме того, я обнаружил, что я установил базовый тег, как вы сделали (полный путь, через /Test/), а затем тег img в файле test.html имел атрибут src, который был просто файлом название. Как и вы, я не видел изображение в браузере. Но я открыл панель firebug, нажал на вкладку HTML, нашел тег img, нависал над ним... и я вижу эскиз для изображения! Я думаю, что поведение браузера просто противоречиво и странно в этом случае.