HTML和Javascript：在新标签页中打开链接

Question

我对forumactif的代码有一点问题。这不是我自己的工作，所以我完全不喜欢这种编码方式...它是HTML页面（http://www.endrothroad.net/h7-page-d-accueil），并且滚动框中的链接无法在新标签页中打开。最重要的是，我无法再更改此框中的文本样式。这就是HTML页面的代码。

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />  
<title>Dernier sujet</title><base target="_parent" /> <style>   
  h1{
  text-align: center;
  font-size:14px;
  color: #dd3d3d;
  font-family: Trajan Pro;
  width: 175px;
  }
  a{
  text-decoration:none;
  color:#ffffff !important;
  font-weight:bold;
  }
  a:hover{
  color:#ffffff !important;
  }</style>  
<div style="margin:-10px;">

<h1>
            Derniers messages        
</h1>

<div style="margin-top: -10px; width: 175px; height: 80px; font-size: 10px; font-family: arial;" id="dernier_sjt">
       <iframe onload="var frame_sjt=window.frame_sjt.document.getElementById('comments_scroll_div');console.log(frame_sjt);document.getElementById('dernier_sjt').innerHTML=frame_sjt.innerHTML;$('.marquee').marquee();" src="/portal.forum" name="frame_sjt"> </iframe>      
</div><script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script><script src="https://illiweb.com/rs3/30/frm/jquery/marquee/jquery.marquee.min.js" type="text/javascript"></script>   
</div>

我尝试了一个简单的“ _blank”，但显然不起作用...如果有人可以帮助我，那就太好了！ ty

Answer 1

我如何在iFrame中的链接在新标签页中打开？

根据Darryl Huffman's Question (How to make all links in an iframe open in new tab?)，您可以使用jQuery为所有a元素赋予blank的目标，或者使用香草Javascript选择每个a元素，两种解决方案都将在新标签页中打开所有链接。

注意：由于网站的行为，这并不跨越iFrame来源中的域。

---

jQuery （您正在使用v1.4.2）：$('a').setAttribute('target','_blank');

$('a').setAttribute('target', '_blank');

h1 {
  text-align: center;
  font-size: 14px;
  color: #dd3d3d;
  font-family: Trajan Pro;
  width: 175px;
}

a {
  text-decoration: none;
  color: #ffffff !important;
  font-weight: bold;
}

a:hover {
  color: #ffffff !important;
}

<script src="https://illiweb.com/rs3/30/frm/jquery/marquee/jquery.marquee.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<div style="margin:-10px;">

  <h1>
    Derniers messages
  </h1>

  <div style="margin-top: -10px; width: 175px; height: 80px; font-size: 10px; font-family: arial;" id="dernier_sjt">
    <iframe onload="var frame_sjt=window.frame_sjt.document.getElementById('comments_scroll_div');console.log(frame_sjt);document.getElementById('dernier_sjt').innerHTML=frame_sjt.innerHTML;$('.marquee').marquee();" src="http://www.endrothroad.net/h7-page-d-accueil/portal.forum"
      name="frame_sjt"></iframe>
  </div>
</div>

---

Javascript ：window.frames["iFrame"].getElementsByTagName("a")[0].target="_blank";

您需要在您的iFrame中添加id="iFrame才能引用以下示例中的iFrame。

window.frames["iFrame"].getElementsByTagName("a")[0].target="_blank";

h1 {
  text-align: center;
  font-size: 14px;
  color: #dd3d3d;
  font-family: Trajan Pro;
  width: 175px;
}

a {
  text-decoration: none;
  color: #ffffff !important;
  font-weight: bold;
}

a:hover {
  color: #ffffff !important;
}

<script src="https://illiweb.com/rs3/30/frm/jquery/marquee/jquery.marquee.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<div style="margin:-10px;">

  <h1>
    Derniers messages
  </h1>

  <div style="margin-top: -10px; width: 175px; height: 80px; font-size: 10px; font-family: arial;" id="dernier_sjt">
    <iframe id="iFrame" onload="var frame_sjt=window.frame_sjt.document.getElementById('comments_scroll_div');console.log(frame_sjt);document.getElementById('dernier_sjt').innerHTML=frame_sjt.innerHTML;$('.marquee').marquee();" src="http://www.endrothroad.net/h7-page-d-accueil/portal.forum"
      name="frame_sjt"></iframe>
  </div>
</div>

---

如何在iFrame中设置样式？

不幸的是，除非iFrame所在的网页与iFrame的目标位于同一域中，否则您将无法访问。

iFrame是网页中显示其他网站或文件的孔或窗口。他们与具有iFrame的页面没有连接。

现在，如果它在同一域中，则可以访问要更改的DOM。

---

EX：

$('iFrame').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  a:hover { color: blue;}  </style>"));
});