在js函数中调用iframe

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

在这里,如果我点击一个链接,它应该显示我们网站内该链接(外部网站)的内容。即,如果我的网站是siteA,并且我放置了一个链接(到siteB),该链接将重定向到'siteB'关闭'siteA'。我只是想避免这种情况,除了我想让siteB在siteA中打开

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

我的想法是,当链接打开时,将创建一个iframe,并在该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..

有没有其他方法来解决我的问题..

6 个解决方案

#1

No javascript is needed, use target attribute:

不需要javascript,使用target属性:

<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

重要提示:由于其X-Frame-Options,您无法在iframe中显示http://google.com。请参阅:X-Frame-Options响应标头

#2

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

try this

#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:

iframe标记不应该在JavaScript函数中。除了抛出异常之外什么都不做。将标记放在锚点下方并在点击时更改其src:

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

事实上,你甚至不需要JavaScript来做到这一点。您可以使用锚点的target属性并将其设置为要在其中打开页面的框架的名称:

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

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

在你的onclick函数中你必须返回false;停止锚点的默认行为,将您带到另一页面。

#5

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

请注意,google.com无法使用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>

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

也使用runat属性。希望这有效。如果没有,那是什么错误?