如何从主文档javascript访问iframe

时间:2015-08-19 11:31:01

标签: javascript jquery html iframe

我使用的是由第三方公司提供的iframe(由于我们的业务是什么,它要么支付iframe,要么支付他们建立网站,iframe更适合我们需要的)但是,有一些我们无法用iframe做的事情,这将是有用的。但是,由于这是暂时性的,每次我们想要改变任何东西都花费几百英镑,如果我们可以通过包含iframe的父页面访问它会更好。

例如,我们在iframe中有一个表单,默认为您所在的某个产品(取决于页面),但您可以搜索其他产品。但是,对于某些我们目前没有处理它们的产品,所以能够在主页面上弹出一个警告框会很好,告诉用户我们不会处理这个问题。

例如,如果在某个类型的“游泳派对”中,我们可能会弹出一条消息“对不起,我们目前无法提供任何游泳派对,但如果您拨打NUMBER,我们会尽快为您预订一个游泳派对可能” 而且,如果有人输入,我们可以将第一个字母大写,如果有人把名字称为“史蒂夫”而不是“史蒂夫”(例如)

很抱歉,如果这不是我们需要的描述,但我们从来没有真正处理这样的问题,但是,施加的限制意味着我们必须寻找一个简单的声音解决方案到更多复杂的问题。

1 个答案:

答案 0 :(得分:1)

尝试contentDocumentcontentWindow.document。下面的模型适合我。一些说明:

1)您必须等待加载整个文档,我在加载内容之前选择iframe时遇到了一些麻烦。如果你起诉jquery,这不会成为一个问题。 ;)

2)如果iframe的内容是跨域的,那么您必须将一些脚本注入iframe以提取您感兴趣的html节点。

主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" /> 
    <title>Main</title>
</head>
<body id="mainbody">
    <div>MAIN</div>
    <iframe id="myFrame" src="test_3.html"></iframe>
    <script src="test.js"></script>
</body>
</html>

iframe Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Inner</title>
</head>
<body id="iframebody"><div id="nameDiv">MY NAME</div></body>
</html>

脚本

document.body.onload = function() {
    document.querySelector('#myFrame').contentDocument.querySelector('#nameDiv').textContent = 'NEW NAME';
};