I'm working in an application that is embed in other websites and some of them use AMP. I'm currently using amp-iframe and I need the website url that the iframe is currently embed in for my app to work properly. I'm trying to pass it through params to use it in my application.
What I've been trying to do is getting the location.href (or location.origin + location.pathname) with amp-script and setting an AMP State to dynamically change the Iframe src. Currently not working.
HTML:
<amp-script layout="container" src="https://cdn.website.com/script.js">
<amp-iframe height="150" resizable sandbox="allow-scripts allow-same-origin allow-popups allow-forms" frameborder="0" src="https://website.com/dev/html" [src]="dynamicUrl">
<div overflow tabindex="0"></div>
</amp-iframe>
</amp-script>
JS:
function checkForAmp(method) {
if (window.AMP && typeof window.AMP.setState === "function") {
method();
} else {
setTimeout(function () {
checkForAmp(method);
}, 50);
}
}
function getUrlAndUpdateWidget() {
const url = `https://website.com/dev/html?dynamic-url=${
window.AMP.win.location.origin + window.AMP.win.location.pathname
}`;
window.AMP.setState({ dynamicUrl: url });
}
checkForAmp(getUrlAndUpdateWidget);
Any ideas how to work around it?
Thanks!
Unfortunately, the AMP object to which you have access in amp-script is not the same thing as the AMP object outside the worker.
AMP.win is undefined. I don't even think window.AMP.setState === "function" will work.
See here for a sample showing how to use AMP.setState in amp-script!
We do need someone to introduce support for the location object. Commenting on the github issue, as you did, helps. What we really need is someone who has time to contribute the code 😎
Related
I'm using the SearchWP Live Ajax search in the navigation of a website in combination with BarbaJS. After a page transition (without refresh) also the navigation is being re-added and that means that I need to re-init SearchWP Live Ajax search. I can't find a way in the documentation.
https://searchwp.com/extensions/live-search/
Based on this repo, this part of the code worked in my scenario.
if (typeof jQuery().searchwp_live_search == 'function') {
jQuery('input[data-swplive="true"]').searchwp_live_search();
// Gutenberg integration is based on a body class addition because we don't have the
// ability to manipulate the markup as we do with get_search_form().
if(typeof _SEARCHWP_LIVE_AJAX_SEARCH_BLOCKS !== 'undefined' && _SEARCHWP_LIVE_AJAX_SEARCH_BLOCKS) {
jQuery('input.wp-block-search__input').each(function() {
// Append data vars.
jQuery(this).attr('data-swpengine', _SEARCHWP_LIVE_AJAX_SEARCH_ENGINE);
jQuery(this).attr('data-swpconfig', _SEARCHWP_LIVE_AJAX_SEARCH_CONFIG);
// Init live search.
jQuery(this).searchwp_live_search();
});
}
}
Tag manager code has been implemented within an iframe on a webpage. It has not been added to the webpage that contains the iframe.
Ive used tag manager to then implement a floodlight tag, and looking at the stats it seems to be double firing.
Do you know why this might be and how to fix it?
You have to create a blocker to avoid send data when you load this on an iframe, you can use this variable (Custom Javascript)
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
How to identify if a webpage is being loaded inside an iframe or directly into the browser window?
And create a blocker when this var is true
I am working with the example for clmtrackr here. I am trying to use an <iframe> as a source of video for the code (as opposed to using a tag, and doing this returns no results.
The example code :
<div id="container">
<video id="video" width="368" height="288" autoplay="" loop="">
<source src="./media/franck.ogv" type="video/ogg">
</video>
<canvas id="canvas" width="368" height="288"></canvas>
</div>
<script>
var videoInput = document.getElementById('video');
var ctracker = new clm.tracker();
ctracker.init(pModel);
ctracker.start(videoInput);
function positionLoop() {
requestAnimationFrame(positionLoop);
var positions = ctracker.getCurrentPosition();
// do something with the positions ...
// print the positions
var positionString = "";
if (positions) {
for (var p = 0;p < 10;p++) {
positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2)+"]<br/>";
}
document.getElementById('positions').innerHTML = positionString;
}
}
positionLoop();
var canvasInput = document.getElementById('canvas');
var cc = canvasInput.getContext('2d');
function drawLoop() {
requestAnimationFrame(drawLoop);
cc.clearRect(0, 0, canvasInput.width, canvasInput.height);
ctracker.draw(canvasInput);
}
drawLoop();
</script>
Has anyone attempting this yet? Any help would be much appreciated!
Thank you,
In most cases, this is not possible because of security measures built into the browser/DOM.
clmtrackr needs to access the pixels of the video file, and to do that, it needs direct access to the <video> element, which in your case is inside the iframe. In order to do that, you would need to reach into the DOM elements inside the iframe to find the video element and pass it to clmtrackr. However, it is not possible to do that unless the iframe is being served from the same domain as the outside page.
Presumably, if the iframe is coming from your own site, then you already have a way to access the source URL of the video file and can create your own element. Then you don't need the iframe. So I'm assuming you're trying to access another video hosting site, like YouTube.
Now, to be thorough, even if you could access the video element inside the iframe or if you could somehow infer the url of the video file and create your own element, clmtrackr cannot access the pixels unless that video file is, once again, coming from the same domain. This is another security measure.
The exception is if the video is served with CORS headers, as described here:
http://jbuckley.ca/2012/02/cross-origin-video/
and here:
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
Unfortunately, few video hosting services serve their videos with CORS headers.
How to hide iframe url From HTML source code?
<iframe src="http://mysite.com" frameborder="0" scrolling="no" width="728" height="90"></iframe>
You can use javascript to load the source, and it will not be visible in iframe url in page source code.
For example with jQuery:
<script type="text/javascript">
$(document).ready(function(e) {
$('iframe').attr('src','http://www.flickr.com/');
});
</script>
<body>
<iframe src="" />
</body>
Example here.
You can combine it with $.post to get the value serverside:
$.post('get-iframe-src.php', function(data) {
$('iframe').attr('src',data);
});
You can even load iframe itself to some element like:
$.post('get-iframe.php', function(data) {
$('#element_id').html(data);
});
etc. solutions are many, this is just one of.
You can't. If the URL isn't in the HTML, how would the browser know where to get it?
One thing you could try is to obscure it to make it slightly harder for someone to find it. You could have the src attribute be blank and then when the document is ready fetch the URL value from the server in a separate AJAX request and update the iframe tag to include that value in the src.
This would be a fair amount of work, however, and wouldn't really accomplish anything. The only thing it would prevent is somebody finding it by viewing the page source. They can still look at the "current version" of the HTML in any web browser's debugging tools. (Right click on an element and inspect it, which is nearly ubiquitous at this point.) Or any other normal traffic-sniffing tools will see it plain as day.
Ultimately, if the web browser needs to know a piece of information, then that information needs to be visible on the client-side.
There's no way to fully block source viewing. But there are a couple ways to disable right-clicking:
1) Javascript:
<script language="JavaScript">
<!--
var message="Your message goes here.";
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
2) Add the following into your tag: oncontextmenu="return false"
reference https://forum.powweb.com/archive/index.php/t-36161.html
I decided for solution that does not use javascript, because most of the time it will be possible to read the "hidden" content.
Moreover, changing iframe SRC with javascript, will keep URL hidden when checking the source. However, inspecting the code will show the real URL.
My code is in PHP; however, I believe that the logic can be translated to other programming languages. This is how it works:
I kept the iframe tag as usual:
<iframe src="dash_url.php"></iframe>
The trick is inside the iframe_url.php, where I validate the referer. If it is valid, page is redirected to iframe URL. If it is not, than URL will be a message.
<?
$iframe_url = "https://example.com";
$Referer = #$_SERVER["HTTP_REFERER"];
$RefererHost = #explode(":", explode("/", explode("//", $Referer)[1])[0])[0];
if ($RefererHost == $_SERVER["SERVER_NAME"]) {
header("Location: " . $iframe_url);
} else {
echo "Invalid URL";
}
?>
If visitor inspects the page or checks the source, iframe tag will show SRC as dash_url.php.
I have a page for an internal app that displays document images streamed from a document storage system using a web service. The problem I am having is that when a user does their search they may get hundreds of hits, which I have to display on one large page so they can print them all. This works fine in Firefox, but in IE it stops loading the images after a while so I get a hundred or so displayed and the rest just have the broken image symbol. Is there a setting somewhere that I can change this timeout?
If the issue is indeed a timeout, you might be able to work around it by using a "lazy load" script and adding new images to the document only after existing images have loaded.
There are a lot of ways to do this, but here's a simple example I threw together and tested. Instead of this:
<img src="image001.jpg" />
<img src="image002.jpg" />
<img src="image003.jpg" />
<img src="image004.jpg" />
<!-- Etc etc etc -->
You could do this:
<div id="imgsGoHere">
</div>
<script type="text/javascript">
function crossBrowserEventAttach(objectRef, eventName, functionRef)
{
try {
objectRef.addEventListener(eventName, functionRef, false);
}
catch(err) {
try {
objectRef.attachEvent("on" + eventName, functionRef);
}
catch(err2) {
// event attachment failed
}
}
}
function addImageToPage()
{
var newImageElement = document.createElement("img");
newImageElement.src = imageArray[nextImageNumber];
var targetElement = document.getElementById("imgsGoHere");
targetElement.appendChild(newImageElement);
nextImageNumber++;
if (nextImageNumber < imageArray.length) {
crossBrowserEventAttach(newImageElement, "load", addImageToPage);
crossBrowserEventAttach(newImageElement, "error", addImageToPage);
}
}
var nextImageNumber = 0;
var imageArray = new Array();
imageArray[imageArray.length] = "image001.jpg";
imageArray[imageArray.length] = "image002.jpg";
imageArray[imageArray.length] = "image003.jpg";
// .
// .
// .
// Snip hundreds of rows
// .
// .
// .
imageArray[imageArray.length] = "image999.jpg";
addImageToPage();
</script>
Each image is added to the page only after the previous image loads (or fails to load). If your browser is timing out, I think that will fix it.
Of course, the problem might actually not be a timeout, but rather that you're running out of memory/system resources and IE is giving up. Or there might be an IE DOM limitation like Sra said.
No final solution, but some hints...
I think the ie Dom hangs up. I,ve seen this in other cases. I needed simply to show the images and used a js which loads the image the time they came into focus, but that want work if you directly hit print I think. Can you use the new css ability to store imagedata directly instead of links. That should solve your problem. I am not quite sure but I think it is supported since ie 7
My guess is that you have to work around the IE setting, the easiest way to do it is simply not showing images that are not loaded or replacing them with a default image:
your html:
<img src="http://domain.com/image.jpg" />
your js:
$('img').load(function(){
// ... loaded
}).error(function(){
// ... not loaded, replace
$(this).attr('src','/whatever/default.jpg');
// ... not loaded, hide
$(this).hide();
});
That is a problem with microsoft. Unfortunately, this is a setting that would have to be changed on every single computer, as there is no remote way to alter it. To change it on your computer, try opening regedit and adding the RecieveTimeout DWORD with a Value of (#of minutes)*6000. Hope this helps-CodeKid1001
Edit: Sorry about that, I forgot to put in the file path:
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\InternetSettings
I used something similar to laod HD pictures as a background using ASP Pages
But i used jQuery to handle the images and its loading. This is a sample for 1 image but with a bit of tweaking you can load dynamically
myImage = new Image();
$(myImage).load(function ()
{
$(this).hide(); //Stops the loading effect of large images. can be removed
$('.csBackground li').append(this); //Append image to where you need it
$(myImage).show();
}).attr('src', settings.images[0]) //I pass an array from ASP code behind so 0 can be 'i'
.error( function { checkImages(); } ) //try and relaod the image or something?
So instead of changing the timeout- just try and reload the images on error.
Otherwise i only found a solution that is client specific (HTTP Timeout)
http://support.microsoft.com/kb/813827