I have some code that in short, is opening an iframe (let's call it iframe1) to view a pdf file, and that pdf is being shown in an iframe itself (let's call it iframe2), I would like to be able to get the source of the iframe2 that is within an iframe1 that would be opened so that the iframe1 itself is just the src of the pdf iframe2 and not 2 different iframes. The Url's are very different.
what is the best way to do this?
I have an open_iframe function that looks something like
function open_iframe(url) {
return '<iframe id="iframe" src="' + url + '" width=100% height=100% frameborder="0" allowfullscreen></iframe>';
}
and I am writing another function that is
function find_file_url(url) {
let iframe = this.open_iframe(url);
return iframe.contentWindow.document.getElementsByTagName('iframe')[0].src;
}
I also have Jquery available to use as well.
Is this something that's possible?
Is there a better approach?
Thanks in advance!
have you attached the iframe object to your dom?
In this the html tag for "iframe" instead of creating a html string , you can create the dom iframe object directly and assign attributes to them and then parse it further.
As Barmar said until then it would considered as just a html string.
.document.getElementsByTagName('iframe') will be a null element as it is not attached to document object.
You might try document.domain = "site.com" , I'm dealing with similar issue.
This will ensure they are in the same domain
Also you can use iframe.contentWindow and iframe.contentDocument scripting to communicate inside for the nested frame.
also assign onload, errorOnload to the attributes for console tracking
iFrame onload JavaScript event
https://javascript.info/cross-window-communication
Related
I have an iframe with the id=phramecomp which contains several elements such as links and button.Let us suppose i have a hyperlink inside iframe with the id=donuts.I want to set a click event for that hyperlink.How do i achieve that ?
This might be duplication of many questions but still anyone could tell me how to do this one ?
Note:
iframe is on other php file by the name orderonlinelist.php
I have included this iframe inside orderonline.php file and i am writing my click function here.
<iframe src="http://localhost/orderonline_list.php" name="phramecomp" id="phramecomp" frameborder="0" scrolling="yes" ></iframe>
This is what i have included in my orderonline.php file.
you can detect click events inside iframe
Lets suppose you an iframe having id="Myframe" and a image in you iframe having id "Myimage"
so for detecting click events inside Myframe in image Myimage you can
$('#Myframe').loads(function()
{
var frame=$('#Myframe').contents();
frame.find('#Myimage').click(function(){
//do anything
});
});
I wish to reference this iframe:
<iframe id= "bro" src="http://www.youtube.com" style="visibility:hidden;display:none"></iframe>
Instead of getBackgroundPage() in the following code:
img.src = chrome.extension.getBackgroundPage().imageSrc[0];
I've tried:
img.src = document.getByElementId("bro").imageSrc[0];
That failed hard. Any suggestions?
First of all,
document.getByElementId("bro")
will return an iframe object, and it doesn't have property called imageSrc.
With that, assuming you have the iframe object, you will then have to deal with Cross Domain Policy that will prevent you from accessing the content of the iframe.
I use postMessage to send events from an iframe to it's parent document. I have control over both sides but the content comes from two different domains.
My simple problem is, that i can not identify the iFrame inside of it's parent callback method. The implementation looks like this:
In the iFrame:
parent.postMessage(JSON.stringify({action: "closeView" }),'*');
In the parent window:
window.addEventListener('message',function(event) {
if(event.origin !== 'https://example.com')
return;
// Parse message back to json
var messageObject = JSON.parse(event.data);
var source = event.source;
/* this is returning: Window -URL- */
console.log( source );
/* This will throw Permission denied, although this code is inside of "parent" */
console.log(source.parentNode);
},false);
I want to identify a certain parent element of the iframe, which is (logically) inside of the parent document.
When i try to use event.source.parentNode or some jQuery on said object, Firefox says, i can not do this to prevent XSS, error: Error: Permission denied to access property 'parentNode'
How can i get the parent element of the iFrame, that triggered the postMessage event listener?
you can use window names for this, as they pass from iframe tag to iframe context.
parent doc:
<iframe name=fr2 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20window.name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe>
<iframe name=fr3 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe>
<script>onmessage = function(e){ // use real event handlers in production
alert("from frame: " + e.data.name);
};</script>
iframe doc:
<html>
<script> parent.postMessage({name: name}, "*");</script>
</html>
which alerts "fr2", then "fr3".
you can then easily use the name attrib to find the iframe in the parent DOM using attrib CSS selectors.
illustrative demo of window.name+iframe concept: http://pagedemos.com/namingframes/
this painfully simple approach is also immune to issues arising from same-url iframes.
As per my understanding this may be try
here suppose your main window's url is www.abc.com\home.php
<body>
<iframe src="www.abc.com\getOtherDomainContent.php?otherUrl=www.xyz.com"/>
</body>
getOtherDomainContent.php in this file need to write ajax call which get cross url content and push that content in current iframe window(getOtherDomainContent.php)'s body part.
getOtherDomainContent.php
Code:
<html>
<head>
//import jqry lib or other you use.
<script>
$(document).ready({
//getcontent of xyz.com
var otherUrlContent=getAjaxHtml("www.xyz.com");
$("body").html(otherUrlContent);
// further code after content pushed.
//you can easily access "parent.document" and else using parent which will give you all thing you want to do with your main window
});
</script>
</head>
</html>
Like seen in this thread: postMessage Source IFrame it is possible to compare each iframes contentWindow with event.source like this:
/*each(iframe...){ */
frames[i].contentWindow === event.source
But i did not like this too much. My solution for now looks like this:
In the iFrame:
parent.postMessage(JSON.stringify({action: "closeView", viewUrl: document.URL}),'*');
Update:
docuent.URL can become a problem, when you use queries or links with location (#anchor) since your current url will become different from the one of the iframe source. So Instead of document.URL it's better to use [location.protocol, '//', location.host, location.pathname].join('') (Is there any method to get the URL without query string?)
In the parent document:
window.addEventListener('message',function(event) {
if(event.origin !== 'https://example.com')
return;
// Parse message back to json
var messageObject = JSON.parse(event.data);
// Get event triggering iFrame
var triggerFrame = $('iframe[src="'+messageObject.viewUrl+'"]');
},false);
Each event will have to send the current iFrame URL to the parent document. We now can scan our documents for the iFrame with the given URL and work with it.
If some of you know a better way please post your answers.
I need the following:
I got a html document, in which I have an iframe and an object. Both, the iframe and the object contain separat html files.
Now I want to click a link in the iframe, and this should affect the links inside the object to hide.
How do I use jQuery selectors to select the links in the object html file?
Structure:
<html file parent>
<iframe> html site 1 with link to click</iframe>
<object> html site 2 with links to affect </object>
<html file parent>
Thanks in advance!
This is not possible if the domain of the iframe is different from that of your .
This is a javascript restriction.
For this to possible you need to have control on the url loaded in the iframe.
If it is of same domain then you can probably do that.
If you have control over the iframe's url try this.
First, have a look at window.postMessage. Using this, you may send an event from your iframe to the window parent target. Listening for that event in the window parent (when something in your iframe changed), you will then be able to access any element inside the object tag using a syntax like this:
$('object').contents().find('linkSelector')
Give your iframe an id, let's say myIframe:
<iframe id="myIframe"> html site 1 with link to click</iframe>
Get a reference to the iframe:
var myIframe = document.getElementById('myIframe');
Post a message from iframe:
myIframe.contentWindow.postMessage('iframe.clicked', 'http://your-domain.here.com');
Handler for iframe change:
var handleIframeChange = function(e) {
//
if(e.origin == 'http://your-domain.here.com') {
// Get reference to your `object` tag
var objContent = $('object').contents();
// For instance, let's hide an element with a class of `link-class-here`
objContent.find('.link-class-here').hide();
}
}
Listen on parent window for the event sent by the iframe:
window.addEventListener('iframe.clicked', handleIframeChange, false);
Haven't tested it right now (did this in the past, when I had control over iframe) but it should work, but as I said, only if you can have control over the iframe.
I have the following question:
I am trying to use a dwf viewer application, this is backuped by an activex that permits to view dwf files when the plugin is installed.
Usually one would use this plugin like this:
<object
classid = "clsid:A662DA7E-CCB7-4743-B71A-D817F6D575DF"
codebase = "http://www.autodesk.com/global/dwfviewer/installer/DwfViewerSetup.cab#version=6,0,0,200"
ID = "Eview"
width = "500"
height = "500"
border="0"></object>
then just call functions like this:
Eview.Viewer.ExecuteCommand("BLACKANDWHITE");
etc..
The thing is I am now creating the object in an Iframe by server side:
<iframe id="dwfFrame" name="dwfFrame" src="plot.aspx" width="100%" height="100%" onload="initDWF()"/>
in plot.aspx I write the dynamic dwf, and then when loading the iframe, the activex is opened and the dwf shown correctly.
// Now output the resulting DWF.
OutputReaderContent(Response, byteReader);
The problem is on my page I am unable to make Javascript calls cause I do not have a reference to the object, I tried issuing them to the Iframe but it doesn't work. Like this:
dwfViewer = document.dwfFrame;
dwfViewer.Viewer.ExecuteCommand("BLACKANDWHITE");
dwfViewer.ExecuteCommand("BLACKANDWHITE");
I beleive this is because the iframe is not the instancied activex object, is there anyway I could get ahold of this object so I can work on it?
Try:
var dwfFrameDoc = parent.dwfFrame.document;
var dwfViewer = dwfFrameDoc.getElementById('Eview');
I don't play around with multiple frames too often, but that is how you would address another frame. It shouldn't matter that the frame in question is an iframe. Each frame has its own window object. The document is a property of that object. parent refers to the parent of the current window or to itself if it is already the top level.
document.dwfFrame would get you the element whose id is dwfFrame, which is not the same as the window object of the iframe. Even if it were, doing dwfViewer.ExecuteCommand('BLACKANDWHITE'); would try to call ExecuteCommand as a method of the iframe's window, not the viewer object.