js如何实现a标签的rel属性？？？？

Posted 2023-05-12

<a target="_blank" href="xxx" rel="shadowbox">
<img src="xxx" />
</a>
以上代码调用了shadowbox插件做了个图片展示的效果，能不能改成通过img的onclick事件调用js来实现。
或者说有没有方法让window.location.href（window.open）带上a rel的效果。
最终目的是项通过css的expression实现img标签统一加上shadowbox的展示效果。

参考技术A

创建一个a标签，设置href  target  rel，插入到文档中，执行该对象的点击事件，然后删掉。

function open(url,rel,target)
    var a=document.createElement("a");
    a.href=url;
    a.target=target;
    a.rel=rel;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a)

追问

用这个办法创建出的a元素代码上是没问题，但是效果还是跟没设置rel属性一样。
就是说确实能创建出xxx
但是没rel的效果，如果是直接把这个a写进body，rel效果是有的，很费解。。

参考技术B setAttribute('rel','shadowbox'); 参考技术C 给img添加shadowbox属性试试

a标签属性 rel="noopener noreferrer"

当你浏览一个页面点击一个a标签连接 <a href="www.baidu.com" target="_blank"> 跳转到另一个页面时，

在新打开的页面（baidu）中可以通过 window.opener获取到源页面的部分控制权， 即使新打开的页面是跨域的也照样可以（例如 location 就不存在跨域问题）。  

rel=noopener 新特性

<a href="www.baidu.com" target="_blank" rel="noopener noreferrer"></a>

在chrome 49+，Opera 36+，打开添加了rel=noopener的链接， window.opener 会为null。在老的浏览器中，可以使用 rel=noreferrer 禁用HTTP头部的Referer属性，使用下面JavaScript代替target=‘_blank‘ 的解决此问题：

var otherWindow = window.open(‘http://keenwon.com‘);
otherWindow.opener = null;
otherWindow.location = url;

使用 window.open 打开页面，手动剑opener设置为null。