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..

MOst of the answers are correct!! :P Choose wisely – DarkHorse Mar 18 '14 at 07:26 — DarkHorse, Mar 18 '14 at 07:26

Tony Dinh · Accepted Answer · 2014-03-18T07:20:13.470

2

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

edited Mar 18 '14 at 07:20

answered Mar 18 '14 at 07:13

Tony Dinh

6,668
5
39
58

What are you saying .. I ran google in your fiddle!! – DarkHorse Mar 18 '14 at 07:17
Sorry, the label is 'Google' but the link is linked to http://hopamchuan.com. I have updated the fiddle. – Tony Dinh Mar 18 '14 at 07:19
Noo, I could get the result. There is no change with output, I hope this is not the good one (i mean what I want). – Giri Mar 25 '14 at 02:22

score 0 · Answer 2 · answered Mar 18 '14 at 07:13

0

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

try this

answered Mar 18 '14 at 07:13

Man Programmer

5,300
2
21
21

Even if Google.com allowed loading in an iframe, there's a big reason this code wouldn't work. It's related to the `src` element. The URL is not valid. – Andrew Barber Apr 09 '14 at 13:55

score 0 · Answer 3 · answered Mar 18 '14 at 07:14

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>

I want the frame to appear only when we click "google" (href). the page should be empty with the only text google(href) and after a click the iframe should execute. if there is no click iframe shouldn't execute, — Giri, Mar 18 '14 at 16:38

score 0 · Answer 4 · answered Mar 18 '14 at 07:16

0

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.

answered Mar 18 '14 at 07:16

Jai

74,255
12
74
103

same issue dude, I want the link(href) to be opened within the same page. whatever u said is true but it takes me to a new tab and opens the link in that tab – Giri Mar 18 '14 at 16:51
Initially, the page should be empty with some header and a link (let it be google here). When the link is click, it should take me to that site and should show that site within the page i.e., below the header (so our site will be active and external link will be opened below the header).. – Giri Mar 18 '14 at 16:54

score 0 · Answer 5 · answered Mar 18 '14 at 07:17

0

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>

answered Mar 18 '14 at 07:17

Swapnil

592
3
13

Neither do stackoverflow.com :D – Mr.TK Mar 18 '14 at 07:18

score -1 · Answer 6 · answered Mar 18 '14 at 07:11

-1

 <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?

answered Mar 18 '14 at 07:11

user2978233

55
1
1
6

no change, same problem (google site/or any) opens in a new tab. I want the link to be opened in the same page replacing the text. – Giri Mar 18 '14 at 16:42
first the page should be empty only showing the link. when the link is clicked an iframe should be appear erasing the link (href) – Giri Mar 18 '14 at 16:45

calling an iframe inside a js function

6 Answers6

JSFiddle