calling an iframe inside a js function

Question

I'm trying to create an external link, that appears within the same site.

Here, If I click on a link it should display the contents of that link(external site) within our site. i.e., if my site is siteA and in that I place a link (to siteB) that will redirect to 'siteB' closing 'siteA'. I just want to avoid the situation besides I want to make the siteB to be opened within the siteA

My idea is when the link is opened, an iframe will be created and the external site will be opened within that Iframe.

 <a href="http://www.google.com" target="your_frame_name" onclick="executeOnClick()">Google</a>

 <script type="text/javascript">

   function executeOnClick(){
      <iframe name="your_frame_name" src="www.google.com" > </iframe>
             return true;
        }

       </script> 

I wrote this code, but couldn't get what I expect. I tried to use button, but it's not working.

Is there any other way to fix my issue..

Answer 1

No javascript is needed, use target attribute:

<a href="http://www.hopamchuan.com" target="iframe1">Load the page</a>

<iframe id="iframe1"> </iframe>

JSFiddle

IMPORTANT: you cannot display http://google.com in iframes because of their X-Frame-Options. See: The X-Frame-Options response header

Answer 2

function executeOnClick(){
      $('body').append('<iframe name="your_frame_name" src="www.google.com" height=200 width=200 > </iframe>');
             return true;
        }

try this

Answer 3

The iframe markup should not be inside your JavaScript function. That does nothing except throwing an exception. Put the markup below your anchor and change its src on click:

<a href="http://www.google.com" onclick="executeOnClick(this)">Google</a>
<iframe id="targetFrame"></iframe>

<script>
    function executeOnClick(target) {
        document.getElementById("targetFrame").src = target.src;
        return false;
    }
</script>

In fact you don't even need JavaScript to do this. You can use the target attribute of the anchor and set it to be the name of the frame you want to open the page in:

<a href="http://www.google.com" target="targetFrame">Google</a>
<iframe name="targetFrame" id="targetFrame"></iframe>

Answer 4

Change to this:

onclick="executeOnClick(this); return false;"

and do this in your funcition:

<script type="text/javascript">
   function executeOnClick(elem){
      var frame = '<iframe name="your_frame_name" src="'+ elem.getAttribute('href') +'" > </iframe>';
      document.body.appendChild(frame); // <----append it here.
   }
</script>

---

In your onclick function you have to return false; to stop the default behaviour of an anchor to take you to the another page.

Answer 5

please note that the google.com will not work with iframe

<a href="javascript:void(0)" onclick="executeOnClick('http://www.google.com')">Google</a>
<iframe id="targetFrame"></iframe>

<script>
    function executeOnClick(src) {
       document.getElementById("targetFrame").src =src;
    }
</script>

Answer 6

 <iframe src="www.google.com" height="400" width="551" frameborder="0" scrolling="no" runat="server"></iframe>

Use runat attribute too. Hope this works. If doesn't, what's the error?