Question

我想要一个代码，当单击超链接时会动态更改iframe标记的来源，例如我有一个母版页，当点击超链接时我应该使用iframe标记从其他网页加载内容但我不知道我知道怎么做。这是我的代码

<html>
  <head>
    <title>
    </title>

    <style type="text/css">
      #content {
        margin-right:30%;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #000;
        margin-left: 17%;
        background-repeat: no-repeat;
        width: 686;
        height: 640;
      }
    </style>

    <script type="text/javascript">

      function hyperlinkChanger(hyperLink) 
      {

        switch (hyperLink)
        {

          case "home":
            var url="home.html";
            return url;
            break;

          case "about_Us":
            var url="about_us.html";
            return url;

            break;

          case "contact_Us:
            var url="contact_us.html";
            return url;

            break;
        }
      }
    </script>
  </head>
  <body>
    <a href="home.html" name="home" onClick="hyperlinkChanger('home')">Home</a>
    <br />
    <a href="about_us.html" name="about_Us" onClick="hyperlinkChanger('about_Us')">About Us</a>
    <br />
    <a href="contact_us.html" name="contact_Us" onClick="hyperlinkChanger('contact_Us')">Contact us</a>
    <br />

    <div name="content">
      <!--please help me write a method to call the output of the funcion hyperlinkChanger-->
      <iframe src="hyprlink function" width="600" height="300">
      </iframe>
    </div>
  </body>
</html>

Answer 1

首先为什么要使用JAVASCRIPT？你可以在a-element上使用target-attribute！

但是如果你必须使用javascript做这样的事情： declare var url ='';在switch语句之前从您切换案例中删除退货在switch语句之后添加：$（'iframe'）。attr（'src'，url）;

Answer 2

Sans javascript：

<html>
<body>
    <iframe id="foo"></iframe>
    <a href="http://stackoverflow.com/questions/8240078/script-to-dynamically-change-the-source-of-an-iframe-tag" target="foo">This page</a>
</body>
</html>

您可以定位本地或外部链接。请注意，在此示例中，在Stack Overflow上运行的javascript检测到其页面正在iframe中加载并向用户发出通知。有些网站没有做到。甚至还有一些技术可以检测您的网页是否正在加载到iframe中，而是直接将父网页重定向到您的网站。如果你正在做的只是加载你自己的页面，你不必担心这个。

用于动态更改iframe标记源的脚本

2 个答案: