對象標記數據屬性與 iframe src 和表單提交

Question

首先，這是一種（不好的）解決方法，將外部 URL（我不控制）加載到object標簽而不是iframe ，因為顯示與內容相關的媒體存在問題......但那是另一回事。

我面臨的問題是我的“數據”屬性不會在 .submit() 上更新，但它會在 .on click() 上更新

在表單提交（函數）等中，我請求外部 URL 加載一些搜索結果。

使用 iframe，'src' 屬性會在每次提交時更新
jQuery('#myDIV').attr('src','http:// ... WORKS ！

使用對象標簽，它不會更新數據屬性值（在第一個請求之后）
jQuery('#myDIV').attr('data','http://... ！

嘗試綁定到 .on click() 函數，然后一切正常

我錯過了什么？ 我記得在某處讀過關於存儲數據值的信息......
並查看我的控制台輸出，URL 查詢被傳遞到 'data' 屬性就好了

Answer 1

看起來可能涉及瀏覽器安全功能。 在我的測試中，當新 url 位於同一域中時，更新data確實有效（請參見下文，將低分辨率 google 徽標交換為更高分辨率的徽標），但是當新資源位於不同的域中時，它不起作用。

然而，示例“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>