如何在 iframe 的主体中添加 javascript 函数答案

【问题标题】：How to add a javascript function inside the body of iframe如何在 iframe 的主体中添加 javascript 函数
【发布时间】：2013-10-29 03:05:55
【问题描述】：

我有一个带有 iframe 和按钮的 html 文件，有没有办法在我单击按钮后在 iframe 的主体内添加一个 javascript 函数？这是我的代码。谢谢

<html>
<head>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script>
        function callMe() { 
            var frame = $('iframe'),
            contents = frame.contents(),
            body = contents.find('body');

    var script2   = document.createElement("script");
    script2.type  = "text/javascript";
    script2.text  = " function setEmployeeId(){var employeeId = 0;};"            
    $(body).append(script2);
        };      
    </script>



    <title>sample</title>
</head>
<body>
        <iframe src="page2.html">           
        </iframe>
    <button onClick="callMe();">click</button>
</body>
</html>

我想要的结果就是这样。

<html>
<head>  

    <title>sample</title>
</head>
<body>
        <iframe>
<html>
<head>  
    <title></title>
</head>
<body>
   <script>
function setemployeeId() {
var employeeId = 0;
};
</script>
</body>
</html> 
</iframe>       
</body>
</html>

【问题讨论】：

框架的页面是否在您的域中？
@AndrewBarber 我假设考虑到src 是相对的“page2.html”。
您可以在这里找到答案...stackoverflow.com/questions/1591135/…

标签： javascript jquery html iframe

【解决方案1】：

希望你能在我们进行的过程中为我澄清一些事情，但我想我有一些坏消息要告诉你。

除非您拥有正在加载的页面，否则在 iframe 中加载的任何内容都无法真正编辑，在这种情况下，您可以将所需的任何内容烘焙到加载的页面中。

但是！

您仍然可以使用 contentWindow 属性访问 iframe 中的元素。这一切都在这里为你准备好了：How to pick element inside iframe using document.getElementById

获得要使用的元素后，您可以在父窗口中创建一个函数，然后使用window.parent 添加对父窗口函数的调用。此处概述：Calling a parent window function from an iframe

因此，如果您想在 iframe 中创建一个按钮，请更改 iframe 的内容，您可以使用

var elem = document.getElementById('myframe1').contentWindow.document.getElementById('myButton')

然后在你的父窗口中创建一个函数

function changeIt(){
    document.getElementById('thingToChangeInIframe_ItsIDintheIframe').property = 'value';
}

并将其附加到带有代码的按钮

elem.setAttribute('onclick', 'changeIt();');

如果您对需要的内容有任何澄清，请发表评论，我们会解决这些问题。很抱歉，这并没有使用太多 jQuery，但这并不是我的强项，但我认为纯 javascript 是相对不言自明的。

编辑：我应该澄清一下，如果 iframe 在另一个域上，那么您的选择几乎都被消除了。出于安全原因，当您将其他人的页面加载到 iframe 中时，您不能弄乱他们的设置。

【讨论】：

对于跨浏览器支持，使用var y=(x.contentWindow || x.contentDocument); if (y.document)y=y.document; 仍然是一个好主意，如w3schools 所示