代码之家 › 专栏 › 技术社区 › Máté Burján

如何查找和编辑嵌入式网页的元素?

tampermonkey embedding google-chrome jquery javascript

Máté Burján · 技术社区 · 7 年前

如何在将网页嵌入div后访问它?正常尝试只返回null。以下是我的意思示例:

var replaceThis = document.querySelector('.div1');
var withThis = document.querySelector('.div2 a').getAttribute("href");
replaceThis.innerHTML = '<object type="text/html" data="' + withThis + '" style="width: -webkit-fill-available; height: -webkit-fill-available;"></object>';

var thingFromEmbeddedSite = document.querySelector('.div2'); //returns div2
console.log(thingFromEmbeddedSite);

thingFromEmbeddedSite = document.querySelector('h2'); //returns null
console.log(thingFromEmbeddedSite);

https://jsfiddle.net/zhhL9rjr/3/

1 回复 | 直到 7 年前

keja 7 年前

你必须等待内容加载,然后访问内容,我已经对你的fiddle做了一个小更新,由于跨来源,它在那里无法工作。

<body>
    <div class="div1">
        stuff
    </div>
    <div class="div2">
        <a href="https://jsfiddle.net/user/login/">link</a>
    </div>
</body>

function embed(src, target){
    return new Promise(function(resolve, reject){
        let iframe = document.createElement("iframe");
        iframe.src = src;
        iframe.style = "width: -webkit-fill-available;height: -webkit-fill-available;";
        iframe.onload = function(){
            resolve(iframe.contentWindow.document);
        };

      target.parentNode.replaceChild(iframe, target);
   });
}

let href = document.querySelector('.div2 a').getAttribute("href"),
    target = document.querySelector('.div1');

embed(href, target).then(function(doc){

    console.log( doc.querySelector('h2') );

});

https://jsfiddle.net/zhhL9rjr/6/

但如果从同一个域加载某些内容,则应该可以正常工作。

推荐文章

Máté Burján · 如何查找和编辑嵌入式网页的元素?

7 年前

Ayman · Golang嵌入式结构类型

8 年前

I. A Ziang Yan · 用Tensorflow可视化多重嵌入

8 年前

Daniel Kaplan · 如何以不同的方式使用文字嵌入/word2vec?使用实际的物理词典

8 年前

borislemke · 匿名结构返回空字段值

8 年前

unnamed_addr · Go中创建复杂结构层次结构的惯用方法是什么?

10 年前

Jim Blum · 嵌入wmv视频不允许全屏按钮

11 年前

Bashevis · 在我的PHP脚本中嵌入另一个网页的最简单方法是什么

12 年前