【问题标题】:Change iframe source from another iframe从另一个 iframe 更改 iframe 源
【发布时间】:2011-05-29 06:58:46
【问题描述】:

好的,我在父页面中有 2 个 iframe(无论出于何种原因)。

我在父页面上有一个导航菜单,它改变了 iframe #1 的来源...

iFrame #1 的工作是显示另一个导航菜单...就像子导航菜单...

现在,我如何在点击 iFrame #1 中的 li 后,更改 iframe #2 的来源?它们都在同一个父页面上...

除了惨败之外,我还收到了来自 Chrome 开发工具的警告 -

不安全的 JavaScript 尝试从具有 URL 文件:///C:/website/news/navigator.html 的框架访问具有 URL 文件:///C:/website/index.html 的框架。域、协议和端口必须匹配。

这里有一些代码可以让事情变得更清晰:

HTML

<!-- HTML for the parent page itself -->
<iframe id="frameone" src=""></iframe>
<iframe id="frametwo" src=""></iframe>
<button onclick="onenav('test.html')">Change 1st frame</button>

<!-- The following is the HTML that is loaded inside "frameone" -->
<button onclick="twonav('test2.html')">Change 2nd frame</button>

// Javascript
var one = document.getElementById('frameone');
var two = document.getElementById('frametwo');

function onenav(x){
    one.src = x;
}

function twonav(y){
    two.src = y;
}

对我来说,这是有道理的,因为这一切都在父页面上执行...加载时,我查询开发工具,我可以看到“一”和“二”都有框架元素。 . 第一个按钮有效,第二个按钮不...

【问题讨论】:

  • 一开始你是怎么尝试的?只有父级可以更改内容,因此您必须从框架 1 与父级以及父级与框架 2 进行通信。
  • 我已经修改了操作,为你们提供了一个示例......我想制作一个 jsfiddle,但后来不想经历 iframe 内容的头痛...... Don '甚至不知道你是否可以编写一个页面并让它在 jsfiddle 内的框架内运行......大声笑......
  • 如果页面都是同域的,iframe可以直接通过父对象parent.frames[1]....

标签: javascript iframe


【解决方案1】:

使用 parent.twonav 时对我有用

DEMO

var links = [
    'javascript:\'<button onclick="parent.twonav(1)">Change 2nd frame</button>\'',
    'javascript:\'Hello\''
];
var one, two;
window.onload=function() {
  one = document.getElementById('frameone');
  two = document.getElementById('frametwo');
}  

function onenav(idx) {
    one.src=links[idx];
}  

function twonav(idx) {
    two.src=links[idx];
}  

【讨论】:

  • 是的,你得到了它的工作......给我几分钟的时间来倒这个并了解有什么不同......
  • 从技术上讲,这是正确的解决方案......它对我来说并不奏效,但我怀疑这是因为我的实现存在很多上下文问题......无论如何谢谢......
  • @Abhishek - 你能发个网址吗,也许我可以修一下?
  • @Abhishek 如果保密,请通过 plungjan.name 与我联系
  • 啊废话...我正在使用的测试文件已经上升并死在我身上...我需要一些时间来安排新的...你会觉得只是第二天一样大方? :-p
【解决方案2】:

您是如何尝试更改 iframe 源的?

parent.document.getElementById('2').src = "the new url";

你尝试过这样的事情吗?我从您的消息中假设第二个 iframe 的 id 是 2。

【讨论】:

  • 父级 iframe #1 和 iFrame #2 都链接到一个 js 文件...在这个 js 文件中,我为两个框架创建了 2 个变量...然后有一个函数,它从调用函数的元素中获取传递的变量 x,并将其作为源...如此有效,html 读起来像
猜你喜欢
  • 2014-01-04
  • 1970-01-01
  • 2014-03-20
  • 2015-07-18
  • 2017-08-28
  • 1970-01-01
  • 1970-01-01
  • 2021-01-28
  • 1970-01-01
相关资源
最近更新 更多