Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/447.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 两个iframe并排,左一个是侧边栏,其中的链接将在右iframe中打开_Javascript_Html_Iframe - Fatal编程技术网

Javascript 两个iframe并排,左一个是侧边栏,其中的链接将在右iframe中打开

Javascript 两个iframe并排,左一个是侧边栏,其中的链接将在右iframe中打开,javascript,html,iframe,Javascript,Html,Iframe,如果左侧是一个包含链接的侧栏,当单击右侧iframe时,将在右侧iframe上打开其他HTML页面,那么使用两个iframe并排显示HTML的最佳实践是什么 诸如此类: 假设您可以控制所有内容,或者至少可以控制菜单,您可以使用来实现这一点 单击链接时,菜单iframe中的脚本将消息发布到父html页面-窗口。top 父页面中的脚本接收消息,并从消息的数据属性解析所需的url 父页面脚本将iframe src属性更改为所需的url 然而,就最佳实践而言,您描述的用例没有最佳实践,如果可能的话,最好

如果左侧是一个包含链接的侧栏,当单击右侧iframe时,将在右侧iframe上打开其他HTML页面,那么使用两个iframe并排显示HTML的最佳实践是什么

诸如此类:

假设您可以控制所有内容,或者至少可以控制菜单,您可以使用来实现这一点

  • 单击链接时,菜单iframe中的脚本将消息发布到父html页面-
    窗口。top
  • 父页面中的脚本接收消息,并从消息的
    数据
    属性解析所需的url
  • 父页面脚本将iframe src属性更改为所需的url
  • 然而,就最佳实践而言,您描述的用例没有最佳实践,如果可能的话,最好避免

    简而言之,iFrame是一种不必要的并发症,最好避免。你失去了很多灵活性,他们迟早会咬你的屁股。我同意以下更详细的解释:

    因为所有的内容都在同一个服务器上,所以我建议您考虑使用Ajax实践来加载页面的内容,以便它们是HTML页面的直接部分。这将带来的一些好处是:

    • 加载的内容将使用与父页面相同的css
    • 加载的内容可以使用与父页面相同的javascript进行操作
    • 默认情况下,容器div将调整大小以适应内容,减少页面上的滚动条
    • 你不需要学习任何异国情调的东西,比如postMessage,除非你真的需要或想要
    一种快速简单的方法是使用jQuery及其函数。 我制作了一个简短的代码笔来展示您应该能够在项目中试用的示例代码。请注意,它在codepen中根本不起作用

    在他们的例子中,代码窗口位于s.codepen.io,而我链接的页面位于codepen.io中——因为没有允许s。从codepen.io加载页面,浏览器不会加载任何内容


    我认为这种类型的问题不适合这个网站。iFrame是否在同一台服务器上?是否拥有相同的域?@Enigram是的,它们都在我的服务器和domain@Neal我想,谢谢你的否决票。您对学习和教育的极大鼓励。希望你与同龄人的行为有所不同。@StasS首先为什么要使用
    iframe
    ?如果所有数据都驻留在服务器/域上,则有其他方法使页面更具交互性。您所描述的基本上是一个单页应用程序。谢谢。为什么要避免呢?我很高兴知道这里有什么不好,我应该如何以不同的方式应对这一挑战。