Question

我试图编写一个脚本，为我的iframe元素创建一个动态标题，而不是硬编码title属性。所以我想获取iframe的src并加载该对象然后获取该对象的title元素。我尝试使用iframe.contentDocument，但我收到了跨域安全错误。

Answer 1

正如消息所述，出于安全原因（例如），您无法访问其他域的内容。对于您的用例，解决此问题的方法是使用ajax加载iframe的站点并从响应中读取标题。由于title-tag不是文档（= body）的一部分，因此无法通过$('title', dom)或dom.find('title')获取。但您可以像下面的示例中那样检索它。

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
            <style type="text/css">
            </style>
            <script type="text/javascript">
            $(function(){
                var url = $('iframe').prop('src');
                $.get(url)
                    .done(function(html){
                        var dom = $(html);
                        var title = dom
                            .filter(function(i,d){ 
                                return d.tagName == 'TITLE'; 
                            })
                            .text();
                        $('h1 span').text(title);
                    })
                ;
            });
            </script>
        </head>
        <body>
            <h1>Title: <span></span></h1>
            <iframe src="http://www.golem.de" style="width: 800px; height: 600px;" />
        </body>
    </html>

如何获取加载的iframe标题元素？

1 个答案: