1

我完全被困住了。我所有的 html 文档都经过验证并正确地相互引用，但是当我加载主 html 时，它不会呈现。

我的目标是有一个有两个侧面的页面：左侧显示默认图像和标题，右侧包括一个按钮，用于通过不同的 html 文档加载左侧的五个不同的随机图像和标题。

我正在用“iframes”制作不同的面。

另外如何更改 iframe 的宽度？

<!DOCTYPE html>

<html>
    <head>
        <title>Free Jokes!</title>
        <meta charset="utf-8">
        <meta name="author" content="Justin Partovi, CS80 1184, Summer 2013">
        <link href="final%20project.css" rel="stylesheet">
    </head> 

    <body>
        <h1 id="shadow">Welcome to Free Jokes!</h1>
        <iframe id="left" src="left.html"></iframe>
        <iframe id="right" src="right.html"></iframe>
    </body>
</html>

左侧：

（请让我知道是否有比我现在做的更好的方法来实现我的目标）

<!DOCTYPE html>

<html>
    <head>
        <title>Your Joke!</title>
        <meta charset="utf-8">
        <script>
        var randomnumber

        function clickForJoke() {
        randomnumber=math.floor( 1 + Math.random() * 15);

        switch ( randomnumber ) {
        case 1:
            window.open( "joke1.html", target="right" );
            break;
        case 2:
            window.open( "joke2.html", target="right" );
            break;
        case 3:
            window.open( "joke3.html", target="right" );
            break;
        case 4:
            window.open( "joke4.html", target="right" );
            break;
        case 5:
            window.open( "joke5.html", target="right" );
            break;

        default:
            window.open( "joke.html", target="right" );
    </script>
</head>
</html>

右侧：

（我是否错误地制作了按钮？）

<!DOCTYPE html>

<html>
    <head>
        <title>Final project</title>
        <meta charset="utf-8">
        <link href="final%20project.css" rel="stylesheet">
    </head>

    <body>
        <button type="button" id="jokeButton" name="jokeButton" onclick="clickForJoke">Click for your joking pleasure!</button>
    </body>
</html>

默认图像和阳离子： 

<html>
    <head>
        <title>Default joke</title>
        <meta charset="utf-8">
        <link href="final%20project.css" rel="stylesheet">
    </head>

    <body>
        <p><img alt src = "laughing%20gif.gif"></p>
        <p><b>Click the button to the right to get a free joke!</b></p>
    </body>
</html>

我还没有制作其他五个 html 文档。

4

4 回答 4

1

这里的问题是右侧 iframe 上的按钮试图调用左侧 iframe 上的 javascript 函数。

每个 iframe 在它自己的进程空间中运行，并且不能直接访问。

parent.iframes["LeftIFrameName"].functionName是要走的路......在你的情况下，这将是parent.iframes["left"].clickForJoke()按钮onclick功能

于 2013-07-26T02:44:50.623 回答
0

正如我在评论中所说

剩下

<!DOCTYPE html>

<html>
  <head>
        <title>Your Joke!</title>
        <meta charset="utf-8">
  </head>

正确的

<!DOCTYPE html>

<html>
    <head>
        <title>Final project</title>
        <meta charset="utf-8">
        <link href="final%20project.css" rel="stylesheet">
    </head>

    <body>
        <button type="button" id="jokeButton" name="jokeButton" onclick="clickForJoke()">Click for your joking pleasure!</button>
        <script>
          var randomnumber

          function clickForJoke() {
              randomnumber=Math.floor( 1 + Math.random() * 15);

              switch ( randomnumber ) {
                  case 1:
                      window.open( "joke1.html", target="left" );
                      break;
                  case 2:
                      window.open( "joke2.html", target="left" );
                      break;
                  case 3:
                      window.open( "joke3.html", target="left" );
                      break;
                  case 4:
                      window.open( "joke4.html", target="left" );
                      break;
                  case 5:
                      window.open( "joke5.html", target="left" );
                      break;

                  default:
                      window.open( "joke.html", target="left" );
              }
          }
      </script>
    </body>
</html>

演示：Plunker

于 2013-07-26T02:52:51.113 回答
0

您不能只控制与另一个 iframe 不同的 iframe。您必须从父级调用它。

<button type="button" id="jokeButton" name="jokeButton" onclick="parent.iframes['left'].clickForJoke();">Click for your joking pleasure!</button>

建议：

您现在所做的目的不需要您使用两个 iframe。它可以在同一使用 AJAX 上。这是一个例子：

首先，让我们在数组中添加页数

var pages = array("joke1.html", "joke2.html", ....);

让我们创建一个显示此页面的容器并在右侧添加一个按钮

<div id="pageLoadArea"></div>
<div id="buttonArea"> 
    <a href="#" id="loadPage">Load Page</a>
</div>

现在，让我们创建一个在 div 上加载随机页面的函数pageLoadArea

function loadPage() {
   page = pages[Math.floor(Math.random()*pages.length)];
   $("#pageLoadArea").load(page);
}

现在，让我们在页面加载并单击按钮时执行此功能

$(function() {
    loadPage();
    $("#loadPage").on('click', loadPage);
});

完成。只需做一些造型，就完成了。

于 2013-07-26T02:48:51.360 回答
0

要更改 iframe 的大小，您可以使用 css：

<iframe id="left" src="left.html" style="width:50%"></iframe>
<iframe id="right" src="right.html" style="width: 50%"></iframe>

您可能需要以自己的方式浮动或排列它们以将它们并排放置。

看起来您右侧 iframe 的文档正在调用您左侧框架中定义的函数。当您在其中有 iframe 页面时，它们实际上存在于不同的空间中，并且您甚至可以反馈给父框架的信息量也很有限。

您可能真正想要做的是刮掉 iframe 并使用 div 或类似的东西：

http://jsfiddle.net/GhCAg/

于 2013-07-26T02:49:47.330 回答