标签: iframe

我有javascript文件,检查iframe是否已加载,如果已加载,则将一些内容附加到iframe

body_application.js

var iframe_object = $('#embedded_document_container')
  .load(function(){
    $(this).contents().find('head').append('<link type="text/css" rel="stylesheet" media="all" href="/assets/style.css"/>');
  });

但是我注意到这种方法在下面的场景1中提到了一个问题.

第一种情况: 我检查了网络日志,首先加载了iframe,然后是修改iframe的脚本body_application.js.

在这种情况下,它不会附加style.css

第二种情况: 我检查了网络日志,在修改了iframe的脚本body_application.js之后加载了iframe.

在这种情况下,它会附加style.css

还有其他方法可以达到这个目的吗？

HTML看起来像这样

<iframe src="/apex/cscfga__ConfigureProduct?linkedId=a0W8E000000Lpa5UAC&amp;configId=a0Z8E000000NBGMUA4&amp;retURL=/a0W8E000000Lpa5UAC&amp;isdtp=vw" width="100%" height="100%" onload="hideLoading()" frameborder="0" style="height: 737px;"></iframe>

如果没有id,选择框架不起作用.我的机器人脚本应该如何识别这个iframe(没有id)？

我的脚本看起来像

${Iframe}=  Execute Javascript  
window.document.getElementsByTagName('iframe')[2]
log ${Iframe}   

但它返回'无'

请建议如何识别此iframe.

我在同一个域上有两个页面.Home.html和page2.html是他们的名字.

home.html具有以下内容

<html>
    <iframe id="one" src="page2.html" style="display:none"></iframe>
    <div id="container">        
        <h1>Title of Page</h1>
        <div id="ShowHere"></div>
    </div>
</html>

page2.html具有以下内容.

<html>
   <div id="container">
       <span id="target">Some Text</span>
   </div>
   <span>Don't Show This Text</span>
</html>

我想使用一些javascript从iframe中的id ="one"获取"target"的内容,然后更改元素id = ShowHere的innerhtml以显示元素中的html"目标"这样,它在"页面标题"一词下面显示"Some Text"字样.

我认为以下是一个开始,放在home.html的底部:

<script>
    var frameSource = document.getElementById("one").contentWindow.document.documentElement.outerHTML;
    // ANSWER TO MY QUESTION
    document.getElementById("ShowHere").innerHTML = frameSource;
</script>

我已经四处搜索并看到了一些应该这样做的答案,但没有一个能提供有关如何做到这一点的有意义的解释,而且没有一个我可以开始工作.我更喜欢使用普通的jilla javascript,但Jquery也没问题.

基于我想要做的事情,即从同一个域上的另一个页面获取div的内容(即innerhtml),我想知道是否有比创建不可见的iframe更好的方法然后阅读它.通过另一种机制获得预期结果的答案也是受欢迎的.

我在iframe中有以下一组ID为#nitseditpreview的代码：

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right" id="nitsmenu" data-nitspagelabel="1">
        <li class="scroll active"><a href="#navigation">Home</a></li>
        <li class="scroll"><a href="#aboutus">About Us</a></li>
        <li class="scroll"><a href="#services">Services</a></li>
        <li class="scroll"><a href="#ourteam">Our Team</a></li>
        <li class="scroll"><a href="#portfolio">Portfolio</a></li>
        <li class="scroll"><a href="#clients">Clients</a></li>
        <li class="scroll"><a href="#blog">Blog</a></li>
        <li class="scroll"><a href="#contact">Contact</a></li>
    </ul>
</div>

我想从锚标记中删除href值，并从样式表中提到与之相关联的CSS，即：

CSS：

#navigation .navbar-inverse .navbar-nav  .active  a,  
#navigation .navbar-inverse .navbar-nav  .active  a:focus, 
#navigation .navbar-nav.navbar-right li a:hover {
    color: #fff;
    background-color: #fc7700;
}

我正在使用jquery执行此功能，到目前为止，我可以通过以下方式获取元素：

jQuery的：

$(document).ready(function () {
$('#nitseditpreview').load(function () { //The function below executes once the iframe has finished loading
    var …

我有一个离子应用程序，我在其中显示视频，当我在chrome浏览器和android设备上对其进行测试时，效果很好，但是在iPhone上什么也没显示。这是我的html代码：

<iframe ng-show="article.external_media.length > 0 && article.external_media.url != ''" ng-src="{{article.external_media[0].url | safeUrl }} "></iframe>

在我的代码中，我设置了我的iframe的allowfullscreen属性，该属性被SkyLight包围，SkyLight是react.js中模态视图的npm模块

            <SkyLight dialogStyles={myBigGreenDialog} hideOnOverlayClicked ref="simpleDialog">
              <iframe src=url frameborder="0" width="960" height="569" allowfullscreen="true"></iframe>;
            </SkyLight>

但是，当我检查页面时，iframe没有属性allowfullscreen：

allowfullscreen="true"但是，当我在控制台中手动添加属性时，iframe可以全屏显示。

有谁知道如何确保allowfullscreen属性存在而无需通过控制台手动添加它？

我想从另一个站点获取div的ID。

比方说，我有一个网站，我想要得到的一切，是div中以“mainbar”从这个URL中的ID - https://stackoverflow.com/questions

您能告诉我，如何使用本机javascript或jquery做到吗？

提前致谢。

我需要value在iframe的文档中设置几个元素的属性.我可以通过Chrome Tools控制台轻松完成此操作.但是相同的命令不适用于由Keyboard Maestro或AppleScript注入页面的JavaScript.

iframe由Chrome扩展程序生成:Evernote Web Clipper.在下面的例子中,我已经调用了Evernote Web Clipper.

选择iframe文档后,此脚本/命令可在Chrome控制台中运行:

var remElem = document.getElementById("comments");
remElem.value = "KM This is a test";
var titleElem = document.getElementById("title")
titleElem.value = 'KMTEST title'

我怀疑在运行上述脚本之前,我首先需要获取或选择iframe文档.我该怎么做呢？

我尝试了很多不同的SO解决方案,但都没有.

以下是Chrome Tools中主要文档的屏幕截图:

Chrome Tools中iframe文档的屏幕截图:

这是我尝试过的,但未成功:

// *** NONE of These Work ***

//--- Method 1 ---
var frame = window.frames[‘frame1’];
var documentObj = frame.document;
var element = documentObj.getElementsByName(‘frame1Text’); 

//--- Method 2 ---
var frame = document.getElementById(‘myframe1’);
var documentObj = frame.contentWindow.document;
var element = documentObj.getElementById(‘frame1Text’);

//--- Method 3 --- …

这是Json Data

$scope.imageFileDisplayContent=
{
"indexFileDisplayContent": "PCFET0NUWVBFIGh0bWw+CjxodG1sPjxoZWFkPjxtZXRhI"
}

这是为将64base htmlfile转换为iframe而编写的代码

  <iframe class="url-preview" ng-src="{{trustSrc(item.indexFileDisplayUrl)}}"></iframe>

如何将64位html文件数据显示到iframe中.提前致谢

我正在使用MessageChannel（）在页面和iframe之间传递消息。在我的场景中，iframe是通信发起方，包含它的页面接收，转换并响应iframe。

在实施系统时，我首先获取并保存了对传递给iframe的端口的引用，将其缓存并继续用于以后的每次通信。

iframe：

 window.onmessage = (e) => {
    console.log("iframe port established");
    //using this port for all following communications
    parentPort = e.ports[0];
    onmessage = establishedConnectionHandler; 
  }

我正在运行所有后续从iframe通过parentPort到父级的通信：

parentPort.postMessage({command, guid, message});

即使文档指出消息通道是一次性通信，这似乎仍然有效，并且使发起通信变得很方便。

我的问题-是受支持的功能还是我正在利用未定义的行为？

这是来源。

编辑-我必须误解了示例MDN的意图：

button.onclick = function(e) {
    e.preventDefault();

    var channel = new MessageChannel();
    otherWindow.postMessage(textInput.value, '*', [channel.port2]);

    channel.port1.onmessage = handleMessage;
    function handleMessage(e) {
      para.innerHTML = e.data;
      textInput.value = '';
    }
  }

在Kaiido的Plunker示例中对此进行了重构。