javascript 从另一个 iframe 更改 iframe 源

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6166357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:43:08  来源:igfitidea点击:

Change iframe source from another iframe

javascriptiframe

提问by Abhishek

Ok, I have 2 iframes inside a parent page (for whatever reason).

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

I have a navigation menu on parent page, which changes the source of iframe #1...

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

iFrame #1's job, is to display ANOTHER navigation menu... Like a subnavigation menu...

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

Now, how can I upon clicking an li inside iFrame #1, change the source of iframe #2? They're both on the same parent page...

现在,如何在 iFrame #1 中单击 li 时更改 iframe #2 的源?他们都在同一个父页面上......

Aside from failing miserably, I also get a warning from Chrome's Dev tools -

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

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.

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

Here's some code to make things slightly clearer:

下面是一些代码,使事情稍微清楚一点:

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

To me, this makes sense, since this is all being executed on the parent page... On loading, I query the dev tools and I can see that both, 'one' and 'two' have frame elements... The first button works, the second one, doesn't...

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

回答by mplungjan

Works for me when using parent.twonav

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

回答by itd

How did you try to change the iframe source?

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

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

Did you try something like this? I assumed from your message that the id of the 2nd iframe is 2.

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