I am trying to do a Javascript postMessage like you can do to an iframe, but now to an embed. I have to use an embed because it is for an app which is loaded on an IOS device, and since IOS has a bug with iframe width and height I need to use an embed.
This is loaded and from inside the embed I can do a postMessage to the parent, but somehow I am not able to post to the embed. What I tried:
document.getElementById("embed").contentWindow.postMessage(...)
document.getElementById("embed").contentDocument.postMessage(...)
document.getElementById("embed").document.postMessage(...)
document.getElementById("embed").getSVGDocument() // will return null
Current embed setup:
<embed src="URL" id="embed" type="text/html"></embed>
Any solution for this?
If you want to get an element by Id in JS, you have to put an Id in your element so the JS script can find it:
<embed id="embed" src="URL" type="text/html"></embed>
If you don't want to use an Id, you can use the getElementsByTagName function to get your element, like this:
//if you only have one element of that type
document.getElementsByTagName("embed")[0].doSomething();
//if you have several embed elements
var embeds = document.getElementsByTagName("embed");
for(var i=0;i<embeds.lenght;i++)
{
document.getElementsByTagName("embed")[i].doSomething();
}
Concerning the contentWindow property, seems like it's an iFrame property only. So you'll have to use another property or switch back to iFrame. More here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Related
Can you load a page into an iframe with JQuery? I have a page that creates a custom printable pdf and need it to load into an iframe to make it easier for the user. I use jquery to pull in all the variables otherwise I could have it load within the page. I am not sure what I am missing with this command to load the page within id="print_form_modal2"?
$.frameReady(function(){
$("#print_form").prepend('<div id="newDiv"></div>');
$('#newDiv').load("print_audit.php?auditID="+auditID+"&action=print&print_name="+print_name+"&print_orient="+print_orient+"&download_option="+download_option+"&type=pdf");
}));
<iframe id="print_form_modal2" name="iFrame" src="">
You could do it the painless way and just use HTML:
Make an <a>nchor with the href to your PDF.
Add an iframe with a name attribute (ex. name="iframe1")
Next, add a target="iframe1" to the <a>.
PLUNKER
Its simple enough to do what you're trying to do using just JavaScript and HTML
HTML:
<iframe id="print_form_modal2" name="iFrame">
JavaScript:
function openIframe() {
document.getElementById("print_form_modal2").setAttribute("src", "https://www.example.com/");
}
You can see the code in a CodePen here: http://codepen.io/anon/pen/VjbBbY
In your code you need to replace https://www.example.com/ with the source path for PDF you wish to display, and change when openIframe is called to suit your requirements.
Here's a link to the codepen example
What you want to do on document ready (or whatever event is relevant to your logic) get the iframe and using the attr method change its source property to point to whatever new/old source.
Like this:
$(document).ready(function() {
$('#iframe-container').attr('src','http://www.w3schools.com/tags/tag_iframe.asp');
});
I am using firebug to inspect the xpath, one block of firebug shows the element your finding is in window or iframe and so on. I am facing similar kind of problem where it shows me 2 options
1: Top window
2: iframe#mainframe
now the problem is,when i inspect the element it shows in iframe#mainFrame, i tried switching the driver control from main window to iframe and detect the element using webdriver but it didn't work for me,I wrote the following set of code:
driver.switchTo().frame("mainFrame");
driver.findElement(By.xpath("//div[#class='div_img']/img[#src='http://ser/themes/20/3/Flor/CF.jpg']")).click();
Note: when i checked the iframe in the html code,it doesn't contain another document inside it, It only contains id and other style and all and src tag.
Kindly suggest if there is some other way through which i can detect the element.
There are various ways to switch to iframe like using frame id, name, index and through webElement.
Might be in your case, there might be no iframe id or name. Best way is to create an xpath that uniquely identifies the iframe, create a webelement using this xpath and pass this webelement to switch frame. This is more reliable.
Suppose you have markup like below:-
<div id='noticeRichText'>
<iframe height="83px" frameborder="0" width="100%" scrolling="NO" '1331808552380'"="" +="" src="initialize.do?init=header&cacheBuster=" marginheight="0" marginwidth="0">
</div>
Create a WebElement for iframe:-
WebElement iframe=
driver.findElement(By.xpath("//*[#id='noticeRichText']/iframe"));
Switch to frame using above webelement:-
driver.switchTo().frame(iframe);
Perform the required actions on frame and then switch back to parent window using:-
driver.switchTo().defaultContent();
for the window handling you can use this...
String baseWindow = driver.getWindowHandle();
driver.switchTo().window(baseWindow);
I have an iframe. I want to access a table which present inside iframe.I want to access it from parent window of iframe. I have written JS like
Document.getElementById("table Id");
But the result come null. What is the process to get it?
thanks
x=document.getElementById("iFrameId");
x.contentDocument.getElementById("tableId");
if you can use jQuery i guess it will work across browsers
$("#iFrameId").contents().find("#tableId")
You have to select the element from the iFrame's document. Per Juan's comment, check against both the name, and id of the iFrame
var targetFrame = window.frames["nameOfIFrame"] || window.frames["iFrameId"];
targetFrame.document.getElementById("tableId");
EDIT
I just tested this with the following:
window.frames["fName"].document.getElementById("Adam").innerHTML
in the Chrome console, and it output the html of the Adam div from within my iframe.
I am able to grab the id from an iframe with this
var iFrame = window.top.document.getElementById('window_<?php echo $_product->getId() ?>_content');
however I can not figure out how to grab the class of that iframe. The prototype library is loaded on the site as well but I do not know how to make the $ selector grab something from window.top
The reason I have to do this is because the id is generated in two different ways from the site and will not work for my purposes.
I started playing around with
var iFrame = window.top.document.getElementsByClassName('theIframe');
but it is not working for me yet...
Any ideas on how I can grab the class name of the iFrame? How can I reach to top with prototype selector?
This will return the class:
window.top.document.getElementById('window_<?php echo $_product->getId() ?>_content').className
If you are storing the iframe element in a variable anyway, you can use:
iFrame.className
I am trying to embed a pdf into my webpage using an object that will fallback to an iframe which loads the pdf through an external rendering service for users that do not have acrobat installed.
I am trying to do it like this:
var container = document.createElement("div");
var object = document.createElement("object");
var iframe = document.createElement("iframe");
$(container).append(object);
$(object).append(iframe);
$("body").append(container);
This works in firefox but causes an error in IE in the jquery core code. It breaks when I append the iframe to the object.
I need to create the content in a way that will give me access to both the object and the iframe element because I do not have a reliable way to detect if the user has acrobat or not, so I am depending on the browser to display the correct content and just styling both the iframe and the object so that either one will look okay.
What is an alternate and cross-browser approach?
have you tried it like this?
var object = $("<object>");
var container = $("<div>").append(object);
$(object).append("<iframe>");
$("body").append(container);