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

【问题标题】：How to fetch the loaded iframe title element?如何获取加载的 iframe 标题元素？
【发布时间】：2017-07-14 09:40:42
【问题描述】：

我正在尝试编写一个脚本来为我的 iframe 元素设置一个动态标题，而不是对标题属性进行硬编码。所以我想获取 iframe 的 src 并加载该对象，然后获取该对象的标题元素。我尝试使用 iframe.contentDocument，但出现跨域安全错误。

【问题讨论】：

试试这个stackoverflow.com/a/1570900/4965214

标签： javascript jquery dom iframe

【解决方案1】：

正如消息所述，出于安全原因（例如），您无法访问其他域的内容。对于您的用例，解决此问题的一种方法是使用 ajax 加载 iframe 的站点并从响应中读取标题。由于标题标签不是文档的一部分 (=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>

【讨论】：