Javascript document.GetElementById（'iframe_id'）。src ='link'只能工作一次

Question

so here's a very simple question but I'm having difficulties on solving it see i have an iframe and i want to change it's src depending on the link that was clicked

here's the javascript code

function showOverlay(id)
    {
        var str1 = 'abstract.php?id=';
        var link = str1.concat(id);
        document.getElementById(id).style['display'] = "block";
        document.getElementById(id).style['opacity'] = "1";
        document.getElementById('abstract_frame').src =  link;
    }

    function hideOverlay(el, evt) 
    {
        if (el && evt)
        {
            el.style.display = evt.target == el ? 'none' : '';
        }
        document.getElementById('abstract_frame').src =  '';
    }

so I used document.getElementById('abstract_frame').src = link; to set the src then on the hideOverlay function I used
document.getElementById('abstract_frame').src = ''; to set the src back to a blank link.

so the problem is when I call on the showOverlay again to set another src link to the iframe with a different value i get a blank screen

here's the html/php

echo '<div class="SearchResults">';
echo "      <span class='top'>";
echo "          <a>";
echo "              <h3>". strtoupper($title) ."</h3>";
echo "          </a>";
echo "          <br />";
echo "          <h5 class='sub'>";
echo "Authors :";
$tags = explode('|',$run['author']);
foreach($tags as $i =>$key) {

echo '<a class="authors">Dr.'.$key.'</a>';

}
echo "<br><br>";
echo "          </h5>";
echo "      </span>";
echo "      <span class='bottom'>";
echo "          <span class='bottomLeft'>";
echo                    ($run['abstract'] != "" ? "             <a class='options' data-articlenum='" . $run['reference_number'] . "' onclick='showOverlay(this.dataset.articlenum)'>Abstract</a><span style='margin:0px 5px;'>|</span>" : "" );
echo "              <a target='_blank' href='view.php?filename=".strtolower($run['title'])."' class='options'>";
echo "                  Full Article";
echo "              </a>";  
echo "          </span>";
echo "          <div class='overlay' id='". $run['reference_number'] ."' onclick='hideOverlay(this, event)'> ";
echo "              <iframe class='abstract' id='abstract_frame'  style='padding:0px;' scrolling='no'>";    
echo "              </iframe>";
echo "          </div>";
echo "          <span class='bottomRight'>";
echo "              <p class='label'>".$run['journal'].", ". $run['volume'] .", ". date("F, Y",strtotime($run['publication_date']))  ."@ Pg.". $run['pages'] ."</p>";
echo "          </span>";
echo "      </span>";
echo "      <br style='clear:both;'/>";
echo "</div>";

here's some visuals