I have a script tag on an HTML page that references an external script URL. The HTML page and the script run on HTTPS URLs. However, the script creates an IMG tag which references an image that is on an HTTP URL. I don't have control over the script itself (it is hosted by a third party). The problem is that the browser complains about loading HTTP content on an HTTPS page.
I tried the following:
Hiding the image using CSS display property - This still causes the image to load and the browser to complain
Changing the SRC attribute of the image using JavaScript/JQuery - this doesn't solve the problem because the script and the image load first and then my JavaScript runs
The image itself is not necessary, I can hide it or remove it. Also, if needed, I can host the image myself on HTTPS, but I still need to change the SRC attribute BEFORE the image loads.
Any suggested workarounds?
Related
I want to change styles css inside at a iframe, using:
$("#box_close").click(function(){
("#iframe").contents().find("#scrolling_box").removeClass("scrollingBox");
$("#iframe").contents().find("#scrolling_box").addClass("scrollingBoxCustom");
});
Not working ok because the attribute src is in different host that index file, so it gives a classic browser policy error when trying to access a resource that is not on the same host.
Is there some another way I can change styles from the html content of an iframe from a page hosted on another server?
Thanks,
I have an image (http://images.littletales.in/testingimageupload.jpeg) which is hosted in AWS, If I open it in browser tab it works fine.
If I try to set as src in img tag in dom it does not work, I also tried replacing it in dom img tags directly.
I have set all the required permission.
In browser Tab -
In Dom -
I'm trying to run a script inside an AMP page.
There is no page I need to load within the src attribute; my script should inject an <iframe> with the correct src (it is unknown at first load, only received in response to a request made by my script).
Is this possible in AMP?
Disclaimer: I'm open to different approaches to accomplish the same result - injecting an <iframe> with an src attribute within an AMP page.
Thank you
The AMP page cannot contain any javascript in the first place, so this won't work: https://www.ampproject.org/docs/reference/spec.html#html-tags
The only way to achieve your goal is to:
create an iframe with a src attribute pointing to an HTML page you control
in that page load the Javascript that does the work. You can see a similar approach in this example: https://ampbyexample.com/advanced/how_to_create_interactive_amp_pages/
As stated by #ade you can pull this off. Think about it like this.....
You'll have an HTTPS resource that you can hit that will return the blank iframe along with all of the JS code you need to populate the iframe. So basically an entirely functioning page that will be returned to the AMP-IFRAME.
Calling this from the src attribute of an AMP-IFRAME tag will then pull in your page that includes a blank iframe and all of the scripting needed to populate it or manipulate it. So all of your custom code is happening within the AMP-IFRAME tag but all of it's resources live within the embedded iframe tag that the AMP-IFRAME tag pulls in and renders.
We have a custom video player that works very similar to what you are talking about. I created a template that can be hit via HTTPS that returns a page that iframes our video as well as includes all the scripts to play it and manipulate it. It's all contained in a nice neat little package and the only thing required to use the AMP-IFRAME is the script that extends it. Check out all the AMP-FRAME documentation here.
Hope this helps.
Currently we are trying to access the HTML of (with javascript) dynamically generated html-elements (e.g. to get the url of an image). If the html-elements are generated with javascript only - their is no problem. Just extracting the image url with javascript by accessing the DOM elements. But now we have trouble with an iframe.
This is the situation at the moment:
We include external script-file (www.test.com/script.js) to create a gallery on our website
The script.js generates a new iframe in our website (document.write('iframe code here')); referencing to www.test.com/iframe.html)
The iframe.html contains javascript-code again to generate the gallery by creating serveral dom-elements (divs, imgs, a, p,....)
Now we need to read the src-attribute of these images. With the debugging tool of the browser, it is no problem. Without the iframe, it's also no problem. But with the iframe, because of the cross domain policy of the browsers we can not access the html of the iframe.html with javascript.
One possible solution was to try to get the src of the iframe tag with javascript, call a server-side script to get the html content of the src-url and run the content via eval()-function on the client again.
I hope you have other better ways to solve that.
It is not clear from your question, but if the iframe is being served by your app, you can use postMessage in order to communicate between the iframe and its parent window.
I have problem when load external html into specific <div>. Here is the problem :
I have html files, "index.html" and "problem.html".
In problem.html I use skrollr to animate content.
When I click the "open" button in index.html, I use jquery load() method to load problem.html into specific in index.html.
The content was loading, but slowly.
When I check using firebug, I see many request skrollr.min.js. Why do I get skrollr.min.js and other file repeatedly?
When I refresh the page, load the menu and see at the firebug there are so many get skrollr.min.js and file that are called.
You could try to load the Page via iframe to see if it's faster. Just set the innerHTML of your container to
<iframe src="http://yourdomain.com/problem.html"></iframe>
when he clicked the Button.