iframe中的HTML定位无法在Chrome或Safari中使用 [英] HTML anchors in iframe not working in Chrome or Safari

问题描述

首先，我不认为自己是一个hack在HTML / CSS以外的东西。这说，我有一个问题，在Chrome和Safari中的附加代码（Firefox和Opera工作完美）。问题是点击中心的一个帮助图标iframe应该发送正确的iframe到相应的锚点，但它不。我想帮助主题从主题移动到主题没有滚动条。

index.html

 <！DOCTYPE html PUBLIC  - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
< title> Lorem ipsum dolor< / title> 
< link href =apstyle.css =stylesheettype =text / css/> 
< / head> 
< body> 
< div class =Body> 
< div class =leftnav>< p> Something< / p>< / div> 
< div class =main>< iframe src =Setup.htmlname =mainid =mainwidth =450height =100％frameborder = >< / iframe>< / div> 
< div class =right>< iframe src =Help.htmlname =helpid =helpwidth =235height =100％frameborder = scrolling =no>< / iframe>< / div> 
< / div> 
< / body> 
< / html> 
  

Setup.html

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
< link href =apstyle.css =stylesheettype =text / css/> 
< title>< / title> 
< / head> 
< body> 
< div class =options> 
< p>获取帮助＃2 
< a href =Help.html＃help2target =help> 
< img src =helpicon16.pngalt =help2class =help_icon/> 
< / a> 
< / p> 
< p>获取帮助＃3 
< a href =Help.html＃help3target =help> 
< img src =helpicon16.pngalt =help3class =help_icon/> 
< / a> 
< / p> 
< / div> 
< / body> 
< / html> 
  

与css

  @charsetUTF-8; 
 
 .Body {
 float：left; 
 clear：both; 
 width：100％; 
 margin-top：5px; 
 margin-bottom：5px; 
} 
 
.leftnav {
 float：left; 
 height：500px; 
 width：155px; 
 margin-left：25px; 
 background-color：＃eae6e3; 
} 
 
 .main {
 float：left; 
 height：500px; 
 width：445px; 
 margin-left：5px; 
} 
 .right {
 clear：right; 
 float：left; 
 height：500px; 
 width：185px 
 margin-left：5px; 
} 
 
 iframe.help {
 overflow：hidden; 
} 
 
 div.spacer {
 height：1000px; 
} 
  

任何帮助将非常感谢

我想添加Help.html可能会更容易复制

Help.html

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // EN
http://www.w3.org/TR/xhtml1/ DTD / xhtml1-transitional.dtd> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/> 
< title>帮助< / title> 
< link href =apstyle.css =stylesheet/> 
< / head> 
< body> 
< div class =HelpPage> 
< h2>帮助文件< / h2> 
 
< a id =help1>< / a> 
< h3>帮助＃1< / h3> 
< p>这是帮助＃1< / p> 
< div class =spacer>< / div> 
 
< a id =help2>< / a> 
< h3>帮助＃2< / h3> 
< p>这是帮助＃2< / p> 
< div class =spacer>< / div> 
 
< a id =help3>< / a> 
< h3>帮助＃3< / h3> 
< p>这是帮助＃3< / p> 
< div class =spacer>< / div> 
 
< / div> 
< / body> 
< / html> 
  

解决方案

remove：

  scrolling =no
  

仍然删除

code> scrolling =no，但将 Help.html 的html代码更改为：

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // EN
http：//www.w3。 org / TR / xhtml1 / DTD / xhtml1-transitional.dtd> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/> 
< title>帮助< / title> 
< link href =apstyle.css =stylesheet/> 
< style> 
 html {
 overflow：hidden; 
} 
< / style> 
< / head> 
< body> 
< div class =HelpPage> 
< h2>帮助文件< / h2> 
 
< a id =help1>< / a> 
< h3>帮助＃1< / h3> 
< p>这是帮助＃1< / p> 
< div class =spacer>< / div> 
 
< a id =help2>< / a> 
< h3>帮助＃2< / h3> 
< p>这是帮助＃2< / p> 
< div class =spacer>< / div> 
 
< a id =help3>< / a> 
< h3>帮助＃3< / h3> 
< p>这是帮助＃3< / p> 
< div class =spacer>< / div> 
 
< / div> 
< / body> 
< / html> 
  

请参阅： testing.dpwebdev.co.uk/stackoverflow/anchors

First off I do not consider myself to be anything more than a hack at HTML/CSS. With that said , I am having a problem with the attached code in Chrome and Safari (Firefox and Opera work perfectly fine). The problem is clicking on one of the help icons in the center iframe should send the right iframe to the appropriate anchor, but it does not. I would like the help topics to move from topic to topic without a scroll bar.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem ipsum dolor</title>
<link href="apstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Body">
    <div class="leftnav"><p>Something</p></div>
    <div class="main"><iframe src="Setup.html" name="main" id="main" width="450" height="100%" frameborder="0"></iframe></div>
    <div class="right"><iframe src="Help.html" name="help" id="help" width="235" height="100%" frameborder="0" scrolling="no"></iframe></div>
</div>
</body>
</html>

Setup.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="apstyle.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="options">
    <p>Get Help #2
    <a href="Help.html#help2" target="help">
        <img src="helpicon16.png" alt="help2" class="help_icon"/>
    </a>
    </p>
    <p>Get Help #3
    <a href="Help.html#help3" target="help">
        <img src="helpicon16.png" alt="help3" class="help_icon"/>
    </a>
    </p>
</div>
</body>
</html>

and the css

@charset "UTF-8";

.Body {
float : left;
clear : both;
width : 100%;
margin-top : 5px;
margin-bottom : 5px;
}

.leftnav {
float : left;
height : 500px;
width : 155px;
margin-left : 25px;
background-color : #eae6e3;
}

.main {
float : left;
height : 500px;
width : 445px;
margin-left : 5px;
}
.right {
clear : right;
float : left;
height : 500px;
width : 185px;
margin-left : 5px;
}

iframe.help {
overflow : hidden;
}

div.spacer {
height: 1000px;
}

Any help would be greatly appreciated

I suppose adding the Help.html might make this easier to replicate

Help.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>

<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>

<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>

<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>

</div>
</body>
</html>

解决方案

remove :

scrolling="no"

and it works for Chrome 21 on windows.

Edit

Still remove the scrolling="no" but change the html code for Help.html to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
<style>
html {
    overflow:hidden;
}
</style>
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>

<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>

<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>

<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>

</div>
</body>
</html>

See here: testing.dpwebdev.co.uk/stackoverflow/anchors

这篇关于iframe中的HTML定位无法在Chrome或Safari中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！