是否有我的HTML不呈现的原因？

我完全被卡住了。我所有的html文档都经过了验证，并且被正确引用，但是当我加载主html时，它不会呈现。是否有我的HTML不呈现的原因？

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

我与“iframes”有不同的方面。

另外如何改变iframes的宽度？

<!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文档呢。

来源

2013-07-26 user2617514

这里有多种问题，第一个是您要访问的是其他'iframe'功能这是不允许的，第二个函数语法是错误的 - 你缺少'}}'末尾 –

你想在左侧面板中打开joke.html –

是的。这是我的意图。我该怎么办？ – user2617514

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

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

parent.iframes["LeftIFrameName"].functionName是要走的路... 而你的情况是parent.iframes["left"].clickForJoke()该按钮的onclick功能

来源

2013-07-26 02:44:50 Prash

我将'clickForJoke'改为'parent.iframes [“left”]。clickForJoke（）'，但它仍然没有响应。还有什么我可以做的吗？ – user2617514

Arun指出了一些语法错误。你修好了吗？你可以看到你在错误控制台上看到了什么javascript错误吗？ – Prash

我确实修复了它们，但它仍然没有响应。 – user2617514

你不能仅仅控制从另一个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); 
}

Now ，当页面加载和按钮被点击时，执行该功能

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

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

来源

2013-07-26 02:48:51 Starx

是的，那太棒了！ – user2617514

@ user2617514，完成。看到我更新的答案。 :) – Starx

要更改您可以使用CSS的I帧的大小：

<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-26 02:49:47 jerrylow

正如我在评论

左

<!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-26 02:52:51

是否有我的HTML不呈现的原因？

回答

相关问题