从另一个iframe更改iframe源

Question

从另一个iframe更改iframe源

javascriptiframe

3

好的，我在一个父页面内有两个iframe（出于某种原因）。

我在父页面上有一个导航菜单，可以更改iframe＃1的源...

iFrame＃1的作用是显示另一个导航菜单... 就像子导航菜单一样...

现在，我如何在点击iFrame＃1内部的li时更改iframe＃2的源？它们都在同一个父页面上...

除了惨败，Chrome Dev工具还会发出警告-

Unsafe JavaScript attempt to access frame with URL file:///C:/website/index.html from frame with URL file:///C:/website/news/navigator.html. Domains, protocols and ports must match.

这里是一些代码以使事情稍微清晰些：

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;
}

对我来说，这是有道理的，因为所有操作都在父页面上执行... 加载时，我查询开发工具，可以看到'one'和'two'都有帧元素... 第一个按钮可以正常工作，但第二个按钮不行...

- Abhishek

你最开始是怎么尝试的？只有父级才能更改内容，因此您需要从frame1与父级进行通信，并从父级到frame2进行通信。 - Ibu

我已经修改了操作，为你们提供了一个示例...我想过制作一个jsfiddle，但是后来不想经历iframe内容的头痛...甚至不知道是否可以在jsfiddle内部编写并运行页面框架...哈哈... - Abhishek

如果所有页面都来自同一个域，那么iframe可以通过父对象parent.frames[1]直接访问... - mplungjan

2个回答

0

你是如何尝试更改 iframe 的来源的？

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

你有试过像这样的东西吗？我从你的消息中推断第二个 iframe 的 id 是 2。

- Ziga Petek

父级、iframe #1 和 iFrame #2 都链接到一个单独的 js 文件... 在这个 js 文件中，我为两个框架创建了 2 个变量... 然后有一个函数，它从调用该函数的元素传递变量 x，并将其作为源放置... 因此，实际上，html 读起来像 <button onclick="nav('test.html')">，而 js 读起来像 function nav(x){ frametwo.src = x;}... 应该在逻辑上工作，但对我来说毫无意义... - Abhishek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mplungjan · Accepted Answer

使用parent.twonav时对我很有效

演示

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];
}