How do I get a chrome extension to load an iframe containing a local page - iframe

I'm writing a chrome extension where the standard popup page is used as a menu and I add a iframe at the bottom of the page to display some output. the display.html page contains the output I intend to display in the iframe appended to the page. This code inside my content script appends the iframe but it searches for a display.html page on the webserver rather than in the code packaged with the extension. Is there some way for me to get it to load my display.html page rather than one that may or may not be there on whichever page the extension is used on.
ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "display.html");
ifrm.style.width = "100%";
ifrm.style.height = "20%";
document.body.appendChild(ifrm);

Updated answer
Per #Cnly's comment, please use chrome.runtime.getURL to get the URL of the embedded resource. (The original answer is extremely old, predating even manifest v2).
Original answer
I think you may want chrome.extension.getURL to get the URL of the embedded resource.

Related

How do I protect the original source (URL) from being accessed directly BUT at the same time allow my iFrame to load that protected page?

I consider myself new to this, so I apologize if I am "off" in anyway.
I need to somehow get a HTML page to load in wordpress as if it was "part of the WP" page.
I have used an iFrame and this works fine (If there's a better solution I am all eyes).
The problem is that I need the HTML page to not be able to be accessed directly by the public. The iFrame however will load as normal.
How would this work? I am a beginner in PHP and somewhat know how .htaccess works. If I am given code please explain where to add it.
You could add some me to the page in your iframe, to detect that it is loaded in the frame and if not redirect to the parent page
if(window.self !== window.top) location.href = ‘http://...’

Mendix iFrame - Page not found

I have created multiple custom .html pages and placed them in /themes in my project. To use these custom pages in my project, I am using iFrame widget, which is placed in a dataview and all the settings are done correctly as I have used this widget previously as well. When I navigate to this page with widget using iFrame, it works fine the first time and displays the page correctly. However, after first time, no link to any of the pages works and gives an error "Page Not Found". Can someone point out what I am doing wrong here or guide me to a different/better solution to achieve this?
Note: I have also tried the same with iFrame tag inside HTML Snippet, and the behaviour is exactly same.
A common mistake is that people use just the filename instead of complete url in iframe url property. Try changing the filename to complete url e.g. http://example.com/file.html instead of file.html.

jQuery Thickbox with .ASHX image handler - shows garbage

I am using an .ASHX handler to return images from my ASP.NET app. When I use the browser to hit the URL directly (example):
http://localhost/myapp/GetImage.ashx?key=12
it works fine... image shows up on the page. but when I use that same link as a target in Thickbox... I get this:
alt text http://franceschina.net/temp/thickbox.png
the distilled version of ASHX the code:
byte[] img = (byte[])pp.PRODUCT_PHOTO1.ToArray();
context.Response.ContentType = "image/JPEG";
context.Response.OutputStream.Write(img, 0, img.Length);
any idea what I'm missing?
http://drupal.org/node/140371:
In the Thickbox module, the main *.js file, thickbox.js does not account for image urls created in drupal, e.g. via /image/view/2321/preview instead of /image.jpg (or *gif or *png). If thickbox.js does not see the file name itself (gif, jpg, png, jpeg) in the link anchor tag (the [a href ...] tag), it will treat the image like another mime type that is not an image. This causes Thickbox to spit out God-awful garbage on top of your page instead of a cool shadowbox (lightbox) effect.
Looks like the same issue you're having.
well I ended up using the iframe option of ThickBox to load my image with another page. I don't love this solution (it requires a separate page and extra code to determine the optimal height/width of the iFrame)... but it works and I don't have any more time to mess with it

Problem passing parameters via Iframe in IE

I'm trying to execute an HTTP GET from my website to another website that is brought in via iframe.
On Firefox, you can see in the source that the correct url is in the iframe src along with it's correct parameters-- and it works.
On IE, you can see in the source that the correct url is in the iframe src along with it's correct parameters-- and it doesn't work...
Is there something about IE that doesn't let you pass parameters through an iframe in the querystring?
I've tried refreshing the iframe in IE, I've tried refreshing my page & the iframe in IE, and I've tried copying the url and re-pasting it into the iframe src (forcing it to refresh as if I just entered it into the address bar for that iframe window). Still no luck!
Anyone know why this is happening, or have any suggestions to try to get around this?
Edit: I cannot give a link to this because the site requires a password and login credentials to both our site and our vendor's site. Even though I could make a test account on our site, it would not do any good for the testing process because I cannot do the same for the vendor site. As for the code, all it's doing is creating the src from the backend code on page load and setting the src attribute from the back end...
//Backend code to set src
mainIframe.Attributes["src"] = srcWeJustCreated;
//Front end iframe code
<iframe id="mainIframe" runat="server" />
Edit: Problem was never solved. Answer auto accepted because the bounty expired. I will re-ask this question with more info and a link to the page when our site is closer to going live.
Thanks,
Matt
By the default security settings in IE query parameters are blocked in Iframes. On the security tab under internet options set your security level to low. If this fixes your problem then you know that is your issue. If the site is for external customers then expecting them to turn down their security settings is probably unreasonable, so you may have to find a work around.
Let's say your site is www.acme.com and the iframe source is at www.myvendor.com.
IIRC, most domain-level security settings don't care about the hostname, so add a DNS CNAME to your zone file for myvendor.acme.com, pointed back to www.myvendor.com. Then, in your IFRAME, set the source using your hostname alias.
Another solution might be to have your Javascript set the src to a redirector script on your own server (and, thus, within your domain). Your script would then simply redirect the IFRAME to the "correct" URL with the same parameters.
If it suits you, you can communicate between sites with fragment identifiers. You can find an article here: http://tagneto.blogspot.com/2006/06/cross-domain-frame-communication-with.html
What BYK said. I think what's happening is you are GETting a URL that is too large for IE to handle. I notice you are trying to send variable named src, which is probably very long, over 4k. I ran into this problem before, and this was my code. Notice the comment about IE. Also notice it causes a problem with Firefox then, which is addressed in another comment.
var autoSaveFrame = window.frames['autosave'];
// try to create a temp form object to submit via post, as sending the browser to a very very long URL causes problems for the server and in IE with GET requests.
var host = document.location.host;
var protocol = document.location.protocol;
// Create a form
var f = autoSaveFrame.document.createElement("form");
// Add it to the document body
autoSaveFrame.document.body.appendChild(f);
// Add action and method attributes
f.action = protocol + '//' + host + "/autosave.php"; // firefox requires a COMPLETE url for some reason! Less a cryptic error results!
f.method = "POST"
var postInput = autoSaveFrame.document.createElement('input');
postInput.type = 'text'
postInput.name = 'post';
postInput.value = post;
f.appendChild(postInput);
//alert(f.elements['post'].value.length);
// Call the form's submit method
f.submit();
Based on Mike's answer, the easiest solution in your case would be to use "parameter hiding" to convert all GET parameters into a single URL.
The most scalable way would be for each 'folder' in the URL to consist of the parameter, then a comma, then the value. For example you would use these URLs in your app:
http://example.com/app/param,value/otherparam,othervalue
http://example.com/app/param,value/thirdparam,value3
Which would be the equivalent of these:
http://example.com/app?param=value&otherparam=othervalue
http://example.com/app?param=value&thirdparam=value3
This is pretty easy on Apache with .htaccess, but it looks like you're using IIS so I'll leave it up to you to research the exact implementation.
EDIT: just came back to this and realised it wouldn't be possible for you to implement the above on a different domain if you don't own it :p However, you can do it server-side like this:
Set up the above parameter-hiding on your own server as a special script (might not be necessary if IE doesn't mind GET from the same server).
In Javascript, build the static-looking URL from the various parameters.
Have the script on your server use the parameters and read the external URL and output it, i.e. get the content server-side. This question may help you with that.
So your iframe URL would be:
http://yoursite.com/app/param,value/otherparam,othervalue
And that page would read and display the URL:
http://externalsite.com/app?param=value&otherparam=othervalue
Try using an indirect method. Create a FORM. Set its action parameter to the base url you want to navigate. Set its method to POST. Set its target to your iframe and then create the necessary parameters as hidden inputs. Finally, submit the form. It should work since it works with POST.

How do I search an iframe for a specific image or grab the source code

My main goal is to search an iframe for a specific image. I know what the image will be (abc_clicked.gif) but am not sure how I can access the iframe to either:
1) search the iframe for the image itself
2) grab the source code in which I will manually search myself for the image
I am looking trying to accomplish this with javascript, as I don't see how PHP could help me at all in this case.
Anyone have any ideas???? I'm lost....
If the iFrame is hosted on the same domain, you can access the DOM the same as you would for the main page using contentDocument.
For example:
var iframeElement = document.getElementById('myiframe');
var imageElement = iframeElement.contentDocument.getElementById('myImage');
(assuming you're working in a Web page and looking for a JavaScript solution)
If the iframed page is in a different domain, there's not much you can do.
If it's in the same domain, here is a cross-browser way to access it's content:
var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
You can then search your iframe:
var imgs = doc.getElementsByTagName("img");
// etc.
Your second option is also valid (but might be more complicated), use ajax to retrieve and parse the page source.

Resources