对象标记数据属性与 iframe src 和表单提交

Question

首先，这是一种(不好的(解决方法，可以将外部 URL(我不控制(加载到object标签中，而不是在iframe中，因为显示与内容相关的媒体存在问题......但那是另一回事了。

我面临的问题是我的"data"属性不会在 .submit(( 上更新，但它会在 .on click(( 上更新

在表单提交(函数(等上，我请求外部URL加载一些搜索结果。

使用 iframe，"src"属性会在每个提交jQuery('#myDIV').attr('src','http://更新
...工程！

使用对象标签，它不会更新数据属性值(在第一次请求之后(，
jQuery('#myDIV').attr('data','http://...不起作用！

但是尝试绑定到 .on click(( 函数，那么一切正常

我错过了什么？ 我记得在某处读过有关存储数据值的信息......
查看我的控制台输出，URL 查询已很好地传递给"data"属性

Answer 1

看起来可能涉及浏览器安全功能。 在我的测试中，当新 URL 位于同一域时，更新data确实有效(请参阅下文将 Lowres Google 徽标换成高分辨率徽标(，但是当新资源位于不同的域上时，它不起作用。

但是，examplke "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>