Атрибут данных тега объекта vs iframe sr c и отправка формы

Question

Во-первых, это (плохой) обходной путь, когда внешний URL-адрес (я не контролирую) загружается в тег object вместо iframe, поскольку существуют проблемы с отображением мультимедийных данных, связанных с содержимым. ..но это другая история.

Я сталкиваюсь с проблемой, что мой атрибут 'data' не будет обновляться в .submit (), но он будет .on click ()

В форме отправки (функция) и, среди прочего, я запрашиваю внешний URL-адрес для загрузки некоторых результатов поиска.

С помощью iframe атрибут 'sr c' обновляется при каждой отправке
jQuery('#myDIV').attr('src','http://... РАБОТАЕТ !

Используя тег объекта, он не будет обновлять значение атрибута данных (после 1-го запроса)
jQuery('#myDIV').attr('data','http://... НЕ РАБОТАЕТ!

Попытка привязки к .on click ( ), однако, тогда все отлично работает

Чего мне не хватает? Я помню, что где-то читал о хранимых значениях данных ...
И, глядя на вывод моей консоли, запрос URL get передается атрибуту data просто отлично

Answer 1

Похоже, может быть задействована функция безопасности браузера. в моих тестах обновление data работало, когда новый URL-адрес находился в том же домене (см. ниже замена Google LoS LoL 1021 * на более высокое разрешение), но он НЕ работал, когда новый ресурс находился на другой домен.

Однако пример "d" показывает решение, которое также работает с другими доменами, однако добавляет еще большую сложность вашему решению;)

Другой домен:

url = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
button.onclick = e => {
  a.src = url;
  b.data = url;
  c.setAttribute("data", url);
  d.outerHTML = "<object data=" + url + " id=d width=200 height=200></object>";
}

<iframe id=a width=200 height=200 src="https://lh3.googleusercontent.com/proxy/la6MoaRdqFiGag_v0pRTM15mb5wkaHlhEVIQiE7Lc9aGDNnLbN6tO-z1J-szI0mslcnw59NAr7n3wct5QOryOTG1SIQkpNYQO5_oFd0Fz8lHjMeTe1fO"></iframe>
<object id=b width=200 height=200 data="https://lh3.googleusercontent.com/proxy/la6MoaRdqFiGag_v0pRTM15mb5wkaHlhEVIQiE7Lc9aGDNnLbN6tO-z1J-szI0mslcnw59NAr7n3wct5QOryOTG1SIQkpNYQO5_oFd0Fz8lHjMeTe1fO"></object>
<object id=c width=200 height=200 data="https://lh3.googleusercontent.com/proxy/la6MoaRdqFiGag_v0pRTM15mb5wkaHlhEVIQiE7Lc9aGDNnLbN6tO-z1J-szI0mslcnw59NAr7n3wct5QOryOTG1SIQkpNYQO5_oFd0Fz8lHjMeTe1fO"></object>
<object id=d width=200 height=200 data="https://lh3.googleusercontent.com/proxy/la6MoaRdqFiGag_v0pRTM15mb5wkaHlhEVIQiE7Lc9aGDNnLbN6tO-z1J-szI0mslcnw59NAr7n3wct5QOryOTG1SIQkpNYQO5_oFd0Fz8lHjMeTe1fO"></object>
<a id=button>click me</a>

и находится в том же домене:

url = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
button.onclick = e => {
  a.src = url;
  b.data = url;
  c.setAttribute("data", url);
  d.outerHTML = "<object data=" + url + " id=d width=200 height=200></object>";
}

<iframe id=a width=200 height=200 src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></iframe>
<object id=b width=200 height=200 data="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></object>
<object id=c width=200 height=200 data="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></object>
<object id=d width=200 height=200 data="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></object>
<a id=button>click me</a>